서근 개발노트

티스토리에 팔로잉

FRONT-END/ReactJS Clone project

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

서근

2년 전

QUOTE THE DAY

“ 소프트웨어 산업의 가장 놀라운 성과는 하드웨어 산업이 꾸준히 이루고 있는 성과들을 착실하게 갉아 먹고 있다는 것이다. ”

- Henry Petroski (헨리 페트로스키)

목차 

JSX 사용 / Babel 설치 방법

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

JSX

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

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

javascript

UNFOLDED

 /* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨) */
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코드로 바꿔보자면 다음과 같다.

javascript

UNFOLDED

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

javascript

UNFOLDED

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

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

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

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

javascript

UNFOLDED

 <script type="text/babel">
 
	const root = document.getElementById('root');
    
       ...
       
<script>

전체코드

html

UNFOLDED

 <!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

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

'FRONT-END/ReactJS Clone project' 카테고리의 관련 포스팅

티스토리 댓글

깃허브 댓글

서근

위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

JSX

JSX 사용 / Babel 설치 방법

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

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

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

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

Apr
일	월	화	수	목	금	토
		1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1

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

JSX

JSX 사용 / Babel 설치 방법

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

[노마드/ReactJS 영화 웹 만들기] - Ch03 | 0. State?

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

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 3. Events in React

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. 리액트 설정 및 기초

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

JSX 사용 / Babel 설치 방법