2.5에서 사용했던 코드를 바꿀 것이다 : Title 과 Button을 Container에서 렌더링 하는 것
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//JSX텍스트 변환을 위해선 꼭 TYPE을 적어줘야 한다.
const root = document.getElementById("root");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse Entered")}>
Hello I'm a title
</h3>
);
}
const Button = () => (
// 이것은 arrow function이라고 부른다.
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("i'm clicked")}
>
Click me
</button>
);
const Container = (
<div>
<Title />
<Button /> //직접 만든 요소는 모두 대문자여야 한다 !!
</div>
);
//container에 이 위 Title 과 Button을 포함하기 위해서는 함수로 바꿔주는 것이 필요하다.
//마치 html 태그인 것처럼 포함시킨다.
//이것은 마치 여러 컴포넌트들이 합쳐진 구성을 하고 있다. 코드를 여기 복붙하는 것과 같다.
//작은 요소로 만들어 관리할 수 있기에 편리하다. 코드를 분리한 후 렌더링 가능하다.
// 즉
// <div> <Title /> </div> 은 ↓↓↓↓
//<div>
// <h3 id="title" onMouseEnter={() => console.log("mouse Entered")}>
// Hello I'm a title
// </h3>
// </div> 이것과 같다 ↑↑↑↑↑
// 버튼만 부분적으로 업데이트 되는 장점이 있다. 코드 분리가 되어 수정이 쉽다. 재 렌더링 효율이 높다
ReactDOM.render(Container, root);
//아니면 Container을 함수로 만들여서 위에 <Container />해서 넣어줘도 된다.
</script>
</html>
onMouse : ()=> 했던것 대신 괄호 안에 쓰는 방식으로 바꾸고 Babel에게 코드를넘겨준 것이다.
Element 에서 Babel에서 변환하기 전과 후의 코드가 나타난다.
직접 만든 컴포넌트를 렌더링 해서, 다른 곳에 사용할 때는 꼭 대문자여야 한다. 그렇게 하지 않으면 html요소가 된다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다