[노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용

서근

2023. 1. 15. 16:48

QUOTE THE DAY

JSX에서 컴포넌트 사용

이전에 만들었던 container 부분도 JSX를 사용하여 변경해 보고, Title과 NewBtn을 컴포넌트 형식으로 변경해 웹에 뿌려보도록 하자.

컴포넌트 생성 방법

우리가 만든 컴포넌트를 사용하기 위해서는 반드시 Uppercase로 작성되었어야 했다. 그리고 이 컴포넌트를 Arrow function을 사용해 함수로 만들어 주면, 사용할 수 있는 컴포넌트로 바뀌게 된다.

//Title에 arrow function을 사용해 함수로 변경해줌!
const Title = () => (
    <h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
        안녕하세요
    </h3>
);
const NewBtn = () => (
    <button id="new-btn" onClick={() => console.log('클릭 되었습니다.')} style={{ border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' }}>
        클릭
    </button>
);

이제 Container 안에 우리가 만든 컴포넌트를 적용하면 되는데, <img /> 처럼 JSX에서 똑같이 사용해 주면 된다.

< /> 는 우리가 만든 컴포넌트를 복사 붙여 넣기 한다는 의미로 만약 만든 컴포넌트가 lowerCase라면 Babel은 HTML 태그라고 착각하고 오류를 띄우게 되니 반드시 UpperCase로 작성해줘야 한다.

/* container 부분도 JSX 방식으로 불러와보자! */
//const container = React.createElement('div', null, [Title, NewBtn]);

/*
JSX에서 Title과 같은 태그를 가져오기 위해서는 해당 변수를 함수로 변경해줘야 한다.
= () => ( ); 는 function Btn() { return ( ); } 와 같음

const Title = ( ... ); ➜
const Title = () => ( ... );
*/

const Container = () => (
    // < /> 는 우리가 만든 컴포넌트를 복사 붙혀넣기 한다는 의미!
    // 우리가 만든 컴포넌트는 반드시 UpperCase로 해줘야 한다.
    // lowerCase로하면 웹은 HTML 태그라고 착각함
    <div>
        <button>테스트 버튼</button>
        <Title />
        <NewBtn />
    </div>
);

 ReactDOM.render(<Container />, root);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <!--Babel 스크립트-->
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!--ReactJS 구현부-->

    <script type="text/babel">
        //type="text/babel" 을 넣어줘야 JSX로 작성된 코드를 브라우저가 이해할 수 있다.
        const root = document.getElementById('root');

        //Title에 arrow function을 사용해 함수로 변경해줌!
        const Title = () => (
            <h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
                안녕하세요
            </h3>
        );
        const NewBtn = () => (
            <button id="new-btn" onClick={() => console.log('클릭 되었습니다.')} style={{ border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' }}>
                클릭
            </button>
        );

        /* container 부분도 JSX 방식으로 불러와보자! */
        //const container = React.createElement('div', null, [Title, NewBtn]);

        /*
        JSX에서 Title과 같은 태그를 가져오기 위해서는 해당 변수를 함수로 변경해줘야 한다.
        = () => ( ); 는 function Btn() { return ( ); } 와 같음

        const Title = ( ... ); ➜
        const Title = () => ( ... );
        */

        const Container = () => (
            // < /> 는 우리가 만든 컴포넌트를 복사 붙혀넣기 한다는 의미!
            // 우리가 만든 컴포넌트는 반드시 UpperCase로 해줘야 한다.
            // lowerCase로하면 웹은 HTML 태그라고 착각함
            <div>
                <button>테스트 버튼</button>
                <Title />
                <NewBtn />
            </div>
        );

         ReactDOM.render(<Container />, root);
    </script>
</html>

저작자표시 비영리 변경금지

'FRONT-END > ReactJS Clone project' 카테고리의 다른 글

[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 1~2. setState (0)	2023.01.26
[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 0. State? (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 5. JSX 사용법 (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 3. Events in React (1)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 2. 리액트 설정 및 기초 (0)	2023.01.15