JSX
React์์ UI ์ปดํฌ๋ํธ๋ฅผ ๋ณด๋ค ์ฝ๊ฒ ๋ง๋ค๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ + XML ํ์ฅ ๋ฌธ๋ฒ์ด๋ค.
JSX ๋ฌธ๋ฒ์ด ์ฌ์ด ์ด์ ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ๊ฐ์ฅ ์น์ํ๊ณ ์ง๊ด์ ์ธ ๋งํฌ์ ๊ตฌ์กฐ๋ก ๋์ด์๊ธฐ ๋๋ฌธ
JSX ๋ฌธ๋ฒ ๊ทธ ์์ฒด๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด๋ ๋ธ๋ผ์ฐ์ ์์ ํด์ํ ์ ์๊ธฐ ๋๋ฌธ์ Babel๊ณผ ๊ฐ์ ํธ๋์คํ์ผ๋ฌ๋ฅผ ํตํด ์์ง ๋๋ ๋ธ๋ผ์ฐ์ ์์ ์ดํดํ ์ ์๋ ๋ฌธ๋ฒ ์ฆ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ก ๋ค์ ๋ณํํ๋ ๊ณผ์ ์ด ํ์ํ๋ค.
JSX๋ HTML์ด ์๋ XML
๋์๋ฌธ์ ๊ตฌ๋ถ
O
X
์ปค์คํ ํ๊ทธ
O
X
๋ซ๋ ํ๊ทธ </> ํ์
O
X
JSX๋ HTML element ์ธ ์ถ๊ฐ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ํ๊ทธ๋ก ์ ์ํ์ฌ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.
React์์ JSX๋ ๋๋ฌธ์ โ ์ปดํฌ๋ํธ, ์๋ฌธ์ โ HTML element๋ก ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ๋ค.
JSX๋ ๋ซ๋ ํ๊ทธ๋ฅผ ๋ช ์ํด์ค์ผ ํ๋ค.
JSX๋ React์์๋ง ์ฐ์ด๋๊ฑธ๊น?
JSX๋ ๋ฆฌ์ํธ์์๋ง ์ฌ์ฉ๋๋ ์ ์ ๋ฌผ์ด ์๋ ๋ค๋ฅธ ํ๋ ์์ํฌ์์๋ ์ฌ์ฉํ ์ ์๋ ๋ฌธ๋ฒ์ด๋ค.
Vue.js: ๊ธฐ๋ณธ์ ์ผ๋ก ํ ํ๋ฆฟ ๊ธฐ๋ฐ์ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ง๋ง JSX๋ก๋ Vue ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ์๋ ์๋ค.
๊ทธ ์ธ ์ฌ์ฉ๋๋ ํ๋ ์์ํฌ preact, ember.js, Hyperapp ๋ฑ
์ฆ, JSX๋ฌธ๋ฒ์ ํ๋์ ํน์ ์ฝ๋๋ก๋ง ๋ณํ๋๋ ๊ฒ์ด ์๋ ๊ฐ ํ๋ ์์ํฌ ๋ง๋ค ๋ณํ๋๋ ์ฝ๋๋ ๋ชจ๋ ๋ค๋ฅด๋ค.
JSX๋ Syntactic sugar
๋ฌธ๋ฒ์ ์คํ(Syntactic sugar) ์ด๋ ๋ฌธ๋ฒ์ ๊ธฐ๋ฅ์ ๋์ผํ๋ฐ ๊ทธ๊ฒ์ ์ฝ๋ ์ฌ๋ ๋๋ ์์ฑํ๋ ์ฌ๋์ด ์ฝ๋๋ฅผ ๋ณด๋ค ์ง๊ด์ ์ด๊ณ ์ฝ๊ธฐ ์ฝ๊ฒ ๋์์ธ ๋ ๋ฌธ๋ฒ์ด๋ค.
JSX๋ ์ฌ์ด ๋งํฌ์ ๊ตฌ์กฐ๋ก ์์ฑ ๋๋ฉฐ ํน์ ๊ธฐ๋ฅ์ ์ํํ๋ ์ฝ๋๋ก ๋ณํ ๋๊ธฐ ๋๋ฌธ์ ๋์ผํ ๊ธฐ๋ฅ์ ๋ณด๋ค ์ฝ๊ฒ ์์ฑํ ์ ์๋ Syntactic sugar์ด๋ค.
jsx๋ Syntactic sugar ์ด๊ธฐ์ jsx๋ก ํ ์ ์๋ ๋ชจ๋ ๊ฒ์ ์์ Javascript๋ก๋ ํ ์ ์๋ค.
React๋ JSX ๋ฌธ๋ฒ์ React.createElement(tag, props, ...children)
ํจ์๋ก ๋ณํ์ํจ๋ค.
React.createElement
๋ฆฌ์ํธ๋ ํจ์จ์ ์ธ ๋ ๋๋ง์ ์ํด ์ค์ ๋๊ณผ ๊ฐ์ ๊ตฌ์กฐ์ธ ๊ฐ์ ๋(Virtual DOM)์ ์ฌ์ฉํ๋ค. ์ด ๊ฐ์ ๋์ ๊ฐ๋จํ ๊ฐ์ฒด ๊ตฌ์กฐ๋ก ๋ง๋ค๊ธฐ ์ํด ๋ฆฌ์ํธ์์ ์ ๊ณตํ๋ ํฌํผ ํจ์
DOM API์์ ๋ ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑํ๋ ์์๋ฅผ ๋ง๋๋ document.createElement()
์ ๋น์ทํ ๋งฅ๋ฝ์ผ๋ก ๋ฆฌ์ํธ์์ ์ฌ์ฉํ๋ Virtual DOM ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑํ๋ ์์ React Element๋ฅผ ๋ง๋๋ ํจ์์ด๋ค.
React๋ JSX ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ง ์๊ณ ๋ createElement(tag, props, ...children)
๋ง์ ์ฌ์ฉํ์ฌ ์ฑ์ ๋ง๋ค ์๋ ์๋ค.
์ผ๋ถ ์กฐ๊ฐ์ด ์ ์ฒด์ ๋น์ทํ ํ๋ํ(fractal)๊ตฌ์กฐ์ธ๋ฐ ์ด์ฐ๋ณด๋ฉด ๋น์ฐํ๋ฐ, DOM์ด Tree ๊ตฌ์กฐ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
DOM API๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค๋ ์ฝ๋๋์ด ์ค์์ผ๋ ์ฌ์ ํ ์ง๊ด์ ์ด์ง ์์ UI๊ตฌ์กฐ๋ฅผ ํ์ ํ๊ธฐ ํ๋ค๋ค.
const vdom = createElement(
'p',
{},
createElement('h1', {}, 'react awesome'),
createElement(
'ul',
{},
createElement('li', { style: 'color: red' }, 'first item'),
createElement('li', { style: 'color: orange' }, 'second item'),
createElement('li', { style: 'color: green' }, 'third item')
)
);
jsx๋ฅผ React.createElement()
๋ก ๋ณํ
React.createElement()
๋ก ๋ณํjsx ๋ฌธ๋ฒ์ ํตํด ๋ด๋ถ์ ์ผ๋ก React.createElement()
๊ฐ ๋์ํ๋ ์์ผ๋ก ๋ง๋ค๊ธฐ ์ํด์๋ ํธ๋์คํ์ผ๋ฌ์ ๋์์ด ํ์ํ๋ค.
๊ฐ์ฅ ๋ํ์ ์ผ๋ก ์ฐ์ด๋ Babel์ ๊ฒฝ์ฐ @babel/plugin-transform-react-jsx
๊ฐ ํด๋น ํจ์๋ก ๋ณํํ๋ ์ญํ ์ ํ๋ค. ๋ณํ๋๋ ์ฝ๋ ํ์ธํ๊ธฐ
์ฌ์ฉ์ ์ปดํฌ๋ํธ
UI์กฐ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ชจ๋ํ ํ๋ฏ์ด ์กฐ์งํํ ์ ์๋ค.
๋ชจ๋ํ๊ฐ ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ ์ธ์ ๋ ํ์ํ ๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค๋ ์๊ธฐ
html ํ๊ทธ์ ๋ฌ๋ฆฌ ์ด๋ฆ์ ๋ถ์ฌ ์ข ๋ ์๋ฏธ๊ฐ ๋ช ํํ UI ํํ๋ก ๋ง๋ค ์ ์๋ ์ฅ์ ์ด ์๋ค.
React.createElement()
ํจ์์์ ์ฒซ๋ฒ์งธ ์ธ์๊ฐ์ผ๋ก ๋๋ฌธ์๊ฐ ๋ค์ด์ค๋ฉด ์ฆ, jsx ๋ฌธ๋ฒ์ ํ๊ทธ ์ด๋ฆ์ด ๋๋ฌธ์๋ก ์์๋๋ฉด ๋ฌธ์์ด๋ก ์ทจ๊ธํ์ง ์๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ(ํจ์, ํด๋์ค)์ผ๋ก ์ทจ๊ธ๋๋ค.
const Hello = () => <h1>Hello</h1>;
const hello = () => <h1>hello</h1>;
const App = (
<p>
<Hello></Hello>
<hello></hello>
</p>
);
// @babel/preset-react ๋ณํ ํ
const Hello = () => React.createElement('h1', null, 'Hello');
const hello = () => React.createElement('h1', null, 'hello');
const App = React.createElement(
'p',
null,
React.createElement(Hello, null), // ๋๋ฌธ์๋ ๊ฐ์ผ๋ก ์ทจ๊ธ
React.createElement('hello', null) // ์๋ฌธ์๋ ๋ฌธ์์ด๋ก ์ทจ๊ธ
);
์ปดํฌ๋ํธ๋ ๋ฐ๋์ createElement()
์ ๊ฒฐ๊ณผ๊ฐ ์ฆ, jsx๋ฌธ์ ๋ฐํํด์ผ ํ๋ค. ์ปดํฌ๋ํธ๋ createElement(tag, props, ...children)
์ธ์ ์ค children ์ธ์๋ฅผ props์ ํฉํด์ ์
๋ ฅ๋ฐ๊ฒ ๋๋ค.
export function createElement(tag, props, ...children) {
if (typeof tag === 'function') {
return tag({
...props,
children: children.length === 1 ? children[0] : children,
});
} else {
return {
tag,
props: props ?? {},
children,
};
}
}
React17 new Trasnform jsx
React17 ์ด์ ์๋ jsx ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ๋ import React from 'react'
๋ฅผ ํฌํจ ํด์ผํ๋ ๊ตฌ์กฐ์ ์ ์ฝ์ฌํญ์ด ์์๋๋ฐ ๊ทธ ์ด์ ๊ฐ ๋ด๋ถ์ ์ผ๋ก React.createElement()
๋ก ๋ณํ์ด ๋๋ฉด์ React๋ฅผ ์ฐธ์กฐํ๊ณ ์๊ธฐ ๋๋ฌธ์ด๋ค. -> React17์์ ์๋กญ๊ฒ ๋ณ๊ฒฝ๋ ๊ธฐ๋ฅ๋ค ์ค jsx๋ฅผ ๋ณํํ๋ ๋ฐฉ๋ฒ์ด ์ถ๊ฐ๋์๋๋ฐ ๊ทธ๋ก ์ธํด ๋ ์ด์ React๋ฅผ import ์ ์ธํ์ง ์๊ณ ์์
์ด ๊ฐ๋ฅํด์ก๋ค. ์์ธํ ์ดํด๋ณด๊ธฐ
const App = () => {
return (
<div className='react'>
<Component title='awesome' />
</div>
);
};
// createElement()
const App = () => {
return React.createElement(
'div',
{
className: 'react',
},
React.createElement(Component, {
title: 'awesome',
})
);
};
// react17 new Transform jsx
import { jsx as _jsx } from 'react/jsx-runtime'; // ์ปดํ์ผ๋ฌ๊ฐ ์๋์ผ๋ก ์ํฌํธํด์ค๋ค.
const App = () => {
return _jsx('div', {
className: 'react',
children: _jsx(Component, {
title: 'awesome',
}),
});
};
Last updated