-
[React] React Element, ComponentFront-end/react 2022. 8. 7. 22:35
React Element
๐ก ๋ฆฌ์กํธ ์ฑ๋ค์ ๊ฐ์ฅ ์์ building block์ด๋ค
- React element๋ DOM element์ ๊ฐ์ํํ์ด๋ค
- React element๋ ํ๋ฉด์ ๋ณด์ด๋ ๊ฒ๋ค์ ๊ธฐ์ ํ๋ค
- React element๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ํํ๋ก ์กด์ฌํ๋ค(๋ถ๋ณ์ฑ์ ํน์ง์ ๊ฐ์ง)
const element = <h1>Hello, World</h1>;
์คํ๋ ๋ createElement() -> React element ์์ฑ -> DOM element ์์ฑ๋๋ค
React element ํน์ง
React element๋ ๋ถ๋ณ์ฑ ํน์ง์ ๊ฐ์ง๊ณ ์๋ค
์ฆ, element ์์ฑ ํ ์์์ด๋ ์์ฑ์ ๋ฐ๊ฟ ์ ์๋ค(์ ๋ฐ์ดํธ ํ๋ ค๋ฉด element๋ฅผ ์ฌ์์ฑํด์ผ ํ๋ค)
๋ฆฌ์กํธ์ ์ฅ์ ์ค ๋น ๋ฅธ ๋๋๋ง ์๋๋ virtual DOM์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ด๋ค
/* Root DOM Node */ <div id="root></div>
Root DOM Node์ element ๋ ๋๋งํ๋ ๋ฐฉ๋ฒ
*๋ ๋๋ง: virtual DOM์์ ์ค์ DOM์ผ๋ก ์ด๋ํ๋ ๊ฒ
const element = <h1>Hi, React! </h1>; ReactDOM.render(element, document.getElementById('root'));
React Component
๐ก React๋ component ๊ธฐ๋ฐ์ด๋ค
๋ ๊ณ ์กฐ๋ฆฝํ๋ฏ ์ปดํฌ๋ํธ๋ค์ ๋ชจ์์ ๊ฐ๋ฐํ๋คprops(์ ๋ ฅ) -> React component -> React element(์ถ๋ ฅ)
props(property)
๐ก ์ปดํฌ๋ํธ์ ์ ๋ฌํ ๋ค์ํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด
props ํน์ง
- ๊ฐ์ ๋ณ๊ฒฝํ ์ ์๋ค(Read-only)
- pureํจ์ ๊ฐ์ ์ญํ ์ ํด์ผํ๋ค
pure ํจ์ impure ํจ์ ์ ๋ ฅ๊ฐ์ด ๋ณ๊ฒฝ๋์ง ์๊ณ , ๊ฐ์ ์ ๋ ฅ๊ฐ์ผ ๊ฒฝ์ฐ ํญ์ ๊ฐ์ ์ถ๋ ฅ๊ฐ์ ๊ฐ์ง ์ ๋ ฅ๊ฐ์ด ๋ณ๊ฒฝ๋จ
์ปดํฌ๋ํธ์ ์ข ๋ฅ
- Function Component(Hook)
- class Component
์ปดํฌ๋ํธ ์ข ๋ฅ ๋น๊ตํ๊ธฐ
// Function Component function Welcome(props) { return <h1>Hi, {props.name}</h1>; }
// class Component class Welcome extends React.Components { render() { return<h1>Hi, {this.props.name}</h1>; } }
๐ก ์ปดํฌ๋ํธ ์ด๋ฆ์ "๋๋ฌธ์"๋ก ์์ํด์ผ ํ๋ค
(์๋ฌธ์๋ก ์์ํ๋ฉด DOM ํ๊ทธ๋ก ์ธ์ํ๋ค ex. div, span, ...)
์ปดํฌ๋ํธ ๋๋๋ง
function Welcome(props) { return <h1>Hi, {props.name}</h1>; } const element = <Welcome name="์ฐ์" />; ReactDOM.render( element, document.getElementById('root') );
1. "์ฐ์"๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ํ๋ render ํจ์ ํธ์ถ
2. name์ด "์ฐ์"์ธ element ์์ฑ
3. ์ค์ DOM์ ์ ๋ฐ์ดํธ
4. ์ฌ์ฉ์์๊ฒ ๋ณด์
'Front-end > react' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] ๋๊ธ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ (0) 2022.08.08 [React] ์๊ณ ๋ง๋ค๊ธฐ (0) 2022.08.08 [React] JSX์ ๋ํด ์์๋ณด๊ธฐ (0) 2022.08.05 [React] ๊ฐ์ (0) 2022.08.05 [React] ๋ฆฌ์กํธ ์์ ์ ์ค๋นํ๊ธฐ (0) 2022.08.05