[React] ReactJS로 영화 웹 서비스 만들기 (2) jsx

hyobbang·2022년 8월 30일

React nomadcoder

ReactJS로 영화 웹 서비스 만들기

목록 보기

2/8

2일차

2-4

vanilla js에서 하던 방식을 간단하게!

property에서 event listener 등록하기

vanilla js

<body>
    <span>클릭수 : 0</span>
    <button id="btn">클릭</button>
</body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick(){
            counter = counter + 1;
            span.innerText = '클릭수 : ' + counter;
        }
        button.addEventListener("click", handleClick);
    </script>

react js

	<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
        const root = document.getElementById("root");
        const h3 = React.createElement(
            "h3", 
            {
                id: "title",
                onMouseEnter: () => console.log("mouse enter"),
            }, 
            "Hello I'm a span"
        );
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("im clicked"),
            },
            "Click me"
        );
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);
    </script>

vanilla js에서는 html을 적고, 해당 html을 가져와서 클릭 함수를 만들고 이것을 이벤트 리스너로 등록해야하는 번거로운 과정이 있었다.
그러나 react js에선 한 번의 정의로 이 모든 과정이 끝난다.

2-5

JSX 사용 - HTML과 비슷한 방식의 편리한 JS 확장 문법

기존 문법

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>
        );

jsx는 html 작성법과 상당히 유사해서 많은 개발자들이 이용하고 있다.

다만 이것을 에러없이 사용하기 위해서는 babel을 사용하여 변환을 해주어야한다.
강의에서는 cdn 방식을 사용했으나, 실제로는 다른 방식을 사용하게 된다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <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>
        );

react 소스가 시작되는 script 태그에 type text를 주어야 babel이 무사히 읽어들일 수 있다.

2-6

JSX 사용 2 - 렌더링까지 JSX 사용하기

기존 렌더링 방식

const container = React.createElement("div", null, [title, btn]);
ReactDOM.render(container);

jsx 문법

 const Container = () => (
        <div>
            <Title/>
        </div>
        );

중요한 point!

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

jsx 문법을 사용할 때는 항상 요소를 대문자로 시작해야한다.
소문자로 쓴다면 html 요소라고 인식하기 때문이다.

애로우 문법 사용하기!

기존 문법

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

애로우 문법

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