[노마드/ReactJS 영화 웹 만들기] - Ch02 | 5. JSX 사용법

서근

2023. 1. 15. 16:04

QUOTE THE DAY

JSX

JSX는 자바스크립트를 확장한 문법이다. 보통 HTML이랑 비슷하지만 property를 HTML 태그의 속성처럼 사용하면 안 된다.

또한 반드시 컴포넌트는 uppercase로 넣어줘야 한다.

/* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨) */
const Title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요');

/* 대신 JSX를 사용하는것이 훨씬 편리하고 많이 쓰인다.*/
const title = (
    <h3 id="main-title" onMouseOver={() => console.log('타이틀에 마우스가 감지 되었습니다.')}>
        안녕하세요
    </h3>
);

처음에 사용했던 기본 React 문법과 JSX를 사용한 코드를 보면 JSX를 사용한 것이 훨씬 직관적이고 편하다는 것을 알 수 있다.

React를 JSX코드로 바꿔보자면 다음과 같다.

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

//JSX를 사용한 방법 (이 방법을 제일 많이 사용함)
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>
);

/* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨)
const title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요');

const btn = React.createElement(
    'button',
    {
        id="new-btn"
        onClick: () => console.log('클릭 되었습니다.'),
        style: { border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' },
    },
    '클릭'
);
*/

const Container = React.createElement('div', null, [Title, NewBtn]);

ReactDOM.render(Container, root);

여기서 Style 부분을 보면 JSX에서 style을 적용할 때에는 대괄호를 두 번 {{}} 사용해야 한다 style={{props}}

JSX 사용 / Babel 설치 방법

JSX를 index 안에서 사용하기 위해선 script를 넣어줘야 한다. 그리고 JSX는 babel을 사용하는데 babel은 JSX의 코드를 변환해 HTML 웹 페이지가 잘 읽어 받아올 수 있게(이해할 수 있게) 해주는 역할을 한다.

Babel 설치 방법 코드 스니펫 (항상 이 스크립트를 사용하지 않음. 더 좋은 방법이 존재함. 이곳에서만 잠깐 사용)

<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

하지만 이것만 적용한다고 해서 바로 적용이 되는 것은 아니다. 만약 바로 실행해 보면 콘솔창에 다음과 같은 에러가 나타난다.

이것을 해결하기 위해서는 ReactJS가 있는 <script> 태그에 <script type=”text/babel”> 이라고 수정해줘야 한다.

<script type="text/babel">

	const root = document.getElementById('root');
    
       ...
       
<script>

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

        //JSX를 사용한 방법 (이 방법을 제일 많이 사용함)
        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>
        );

        /* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨)
        const title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요');

        const btn = React.createElement(
            'button',
            {
                id="new-btn"
                onClick: () => console.log('클릭 되었습니다.'),
                style: { border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' },
            },
            '클릭'
        );
        */

        const container = React.createElement('div', null, [Title, NewBtn]);

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

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩

ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩. Contribute to Seogun95/Movie-web-servic-ReactJS development by creating an account on GitHub.

github.com

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

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

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

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