젠싱 싱예

by

연구일자: 2023.03.05

<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

    const root = document.getElementById("root");

// Title
    const Title = () => (
        <h3
            id="title"
            onMouseEnter={() => console.log("mouse enter")}
        >
            Hello I'm a title
        </h3>
    );


// Button
    const Button = () => (
        <button
            style={{ backgroundColor: "tomato"}}
            onClick={() => console.log("i'm cliked")}
        >
            Click me!!!
        </button>
    );


// 앞에서 만들어 준 Title과 Button을 Container 안에 포함시킴
    const Container = (
        <div>
            <Title />
            <Button />
        </div>
    );

// root 안에 Container를 넣어 렌더링
    ReactDOM.render(Container, root);

</script>

</html>

주석

<!DOCTYPE html>
<html>

<body>
    <!-- 리액트를 사용해서 태그를 생성할 것이기 때문에 body에 작성하지 않아도 된다. -->
    <div id="root"></div>
</body>
<!-- 리액트 사용을 위한 스크립트 (필수로 적어주어야 한다.) -->
<!-- react-dom은 React element를 HTML에 두는 역할을 한다. -->
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<!-- Babel을 이용하여 코드를 변환 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">


    // 리액트로 HTML 태그 만들기
    const root = document.getElementById("root");


    // 오래된 방식 => 이렇게 안쓰고 대부분 JSX로 쓰게된다.
    // "h3" ==> HTML의 태그 기능임.
    // const h3 = React.createElement(
    //     "h3",
    //     {
    //         id:"title",
    //         onmouseenter: () => console.log("mouse enter"),
    //     },
    //     "Hello I'm a span"
    // );




    // JSX방식
    const Title = () => (
        <h3
            id="title"
            onMouseEnter={() => console.log("mouse enter")}
        >
            Hello I'm a title
        </h3>
    );

    // function 으로
    // function Title() {
    //     return (
    //         <h3
    //              id= "title"
    //              onmouseenter ={() => console.log("mouse enter")}>
    //             Hello I'm a title
    //          </h3>
    //     );
    // }



    // ()=> 는 arrow function 이라고 한다.
    // ()=>  를 붙여주면 Button 이 함수가 된다. 
    const Button = () => (
        <button
            style={{ backgroundColor: "tomato"}}
            onClick={() => console.log("i'm cliked")}
        >
            Click me!!!
        </button>
    );




    // button 이란 이름은 굳이 html의 태그 이름과 일치할 필요가 없다. 하고싶은걸로 하면 됨.
    // const btn = React.createElement(
    //     "button", 
    //     {
    //     onClick : () => console.log("i'm cliked"),
    //    //onClick : () => alert("ddd"),
    //    style: {
    //     backgroundColor:"tomato",
    //    },
    // },
    // "click me"
    // );


    // Container 를 대문자로 적어주어야 한다.
    // <Title /> 처럼 컴포넌트의 첫 글자는 반드시 대문자여야 함. (소문자로 적게되면 HTML태그로 인식해버림.)
    const Container = (
        <div>
            <Title />
            <Button />
        </div>
    );


    // rander => '사용자에게 보여준다' 라는 의미
    // JSX는 보기 쉽게 코드를 분리한 뒤에 함께 렌더링한다.
    // root 안에 container를 넣어 렌더링
    ReactDOM.render(Container, root);

</script>

</html>
'추천 관련글,