const container = React.createElement("div", nulln [Title, Button]);
ReactDOM.render(container, root);
이 전 글과 똑같이 위의 코드를 아래처럼 바꿔줄 수 있다.(대소문자 잘 지켜주자)
const Container = <div>Title Button</div>;
ReactDOM.render(Container, root);
이렇게 코드를 작성하면 Title Button
이 버튼이 아니라 텍스트로 나오는데 요소들을 하나도 포함시키고 있지 않아서이다.
이 전 글에서 작성한 title과 button의 코드를 가져와보자.
<script type=""text/babel">
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button
style = {{
backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
</script>
const Title
과 const Button
뒤에 () =>
라는 arrow function을 넣어준다.
const Title = () =>
는 function Title
과 같다.
아래 코드로 정확하게 이해해보자.
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
const Button = () => (
<button
style = {{
backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
위 두 개의 코드는 구현 방식은 다르지만 똑같다.
그럼 아까 맨 위에 있던
const Container = <div>Title Button</div>;
ReactDOM.render(Container, root);
이 코드는 어떻게 바꿔줄 수 있을까? 우리는 div에 이미지를 넣고 싶을 때
const Container = <div><img />Title Button</div>;
이렇게 해주었다. 그럼 Title이나 Button을 랜더링 하고 싶으면 대문자로 적어주면 된다.
const Container = (
<div>
<Title />
</Button />
</div>;
);
이렇게 <Title />
을 입력해주는건
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
위 코드를 복사해서 넣어주는 것과 같다. 하지만 코드를 더 깔끔하고 정돈되게 해주는 것이다.
기억해야 될건 컴포넌트의 첫 글자는 대문자가 되어야 하고, 만약 소문자면 React랑 JSX는 이게 HTML button이라고 생각할 것이다.
무조건 대문자!!!!!!!