-
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script src="app.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const Number = ({ text }) => {
// js가 jsx를 리턴
if (text.charAt(0) === text.charAt(0).toUpperCase()) {
// js area
// return -> js arera
return (
<h1>
{/* js area */}
{text /*js area*/}
</h1>
);
} else {
// return -> js area | h1 tag -> jsx area
return
<h1>{text /* js area*/}</h1>;
}
};
const Cumber = ({ number, selected }) => {
return selected ? <h1>{number}</h1> : <h3>{number}</h3>;
};
const element = (
<>
{[1, 2, 3, 4, 5, 6, 7, 8].map((number) => (
<Cumber // typekey={number}
number={number} //props
selected={number % 2 == 0 ? true : false} //props
/>
))}
</>
);
console.log(element);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>'React' 카테고리의 다른 글
Rendering - react's advantage - 2 (0) 2022.04.29 Rendering - react's advantage (0) 2022.01.31 Props② - custom element (0) 2022.01.14 Props① (0) 2022.01.06 Multi-Element (0) 2021.12.10