[노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 6. JSX part Two

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

 

1.  컴포넌트를 다른 컴포넌트에 넣기

---

<script type="text/babel">
    const root = document.getElementById("root");
    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>
    );
    const Container = (
        <div>
            <Title />
            <Button />
        </div>
        );
    ReactDOM.render(Container, root); 
</script>

👉🏻컴포넌트는 대문자로 만들어야 한다. 소문자로 이름을 지으면 HTML코드와 헷갈리기 때문이다.

• 먼저 이전에 만들었던 Title, Button 변수들을 함수 형태로 만들어준다.
• Container의 div에 Title, Button 컴포넌트를 포함해주고 render한다.