<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<!-- 바벨 컴파일러 불러오기 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<!-- 바벨이 읽을 수 있게 만들어 준다. -->
<!-- 바벨은 자바스크립트 컴파일러! JSX표현을 자바스크립트가 이해할 수 있는 표현으로 바꾸어준다. -->
<script type="text/babel">
const rootElement = document.getElementById("root");
// element를 리턴하는 함수 - 1.
const Paint = ({ title, description, children }) => (
<>
<h1>{title}</h1>
<h3>{description}</h3>
{children}
</>
);
// element를 리턴하는 함수 - 2.
const Good = () => <h3>Good</h3>;
// element를 직접 주입할 함수
const element = (
<>
<Paint title="Good" description="good">
<Good />
<Good />
<Good />
<Good />
</Paint>
</>
);
console.log(element);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>💡 element를 return 하는 함수
Good와Paint를 만들어서 element에 직접 주입한다.
- 직접 element를 return할 수 있는 함수를 만들수 있다는 것을 처음 배웠다.
- Good이라는 element를 찍어 낼수 있게 되었다. 무한으로!!!
잠실사는 주니어 개발자