๐ค ๋ฆฌ์ํธ(React)
๊ตฌ Facebook, ํ Meta์์ ๊ฐ๋ฐํ ์๋ฐ์คํฌ๋ฆฝํธ(JS) ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ํด๋ผ์ด์ธํธ์์ ๋์ ์ผ๋ก ์น์ ๊ตฌ์ถํ๋ฉฐ, ์๋ฒ์์ ๋งค์ผ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ๊ตฌ๋ํ๋ ๊ธฐ์กด ์นํ์ด์ง ์ฒ๋ฆฌ ๋ฐฉ์์ด๋ ์ฐจ์ด์ ์ ๋ SPA(Single Page Application)๋ฅผ ์ด์ฉํ๋ค.
๊ธฐ์กด ์นํ์ด์ง ๋์ ๋ฐฉ์์ DOM์ ์ง์ ์ ์ผ๋ก ์กฐ์ํ์ฌ ๋ ๋๋ง์ ๋ฐฉ์์ ์ฑ์ฉํ์ง๋ง, ๋ฆฌ์ํธ๋ Virtual Dom ์ ์ด์ฉํด ์นํ์ด์ง์์ ๋ณํ๋ฅผ ๊ฐ์งํ์ฌ Virtual Dom๊ณผ ๊ธฐ์กด Dom์ ๋งค์นญ์์ผ์ ๋ณ๊ฒฝ์ด ์๋ ๋ถ๋ถ๋ง ์์ ์ ํด์ค๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋์ ์ธ ๋ณํ๊ฐ ๋ง์ ์น์ผ์๋ก ์ข์ ์ฑ๋ฅ์ ๋ณด์ฌ์ค ์ ์๋ ๋ฆฌ์ํธ์ง๋ง, ๋น๊ต์ ๋ณํ๊ฐ ์ ์ ์ ์ ์ธ ์น์ ์คํ๋ ค ์ฑ๋ฅ์ด ๋จ์ด์ง ์๋ ์๋ ์๋ ์ ์นผ์ ๊ฐ์ง๊ณ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
๋ํ props ๋ผ๋ ๊ฒ์ ํตํด ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ์ ์๋ ์ฒด๊ณ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ์ด props๋ ๋ถ๋ณ์ ๊ฐ์ผ๋ก ์กด์ฌํ๋ฉฐ, ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ๋, ์ฌ์ฉํ๊ฒ ๋๋ค.
import React from 'react';
import ReactDOM from 'react-dom';
function App (props){
return (
<h1>Hello, {props.name}!</h1> // props๋ก name์ ์์
)
}
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App name="World" />); // props๋ก name์ ์ ๋ฌ
๋ชจ๋ ์จ๋ฆฌ๋จผํธ๋ React Dom์์ ๊ด๋ฆฌํ๋ค. ์ด๋ฅผ Root DOM Node ๋ถ๋ฆฌ๋๋ฐ, createRoot๋ฅผ ํตํด DOM node๋ฅผ ๋ง๋ค์ด์ฃผ๊ณ , App์ด๋ผ๋ Element๋ฅผ render๋ฅผ ํตํด ๋ก๋ํ๊ฒ ๋๋ค.
๐ค JSX(JavaScript Xml)
๋ฆฌ์ํธ๋ JSX(JavaScript Xml) ์ ์ด์ฉํ์ฌ HTML์ ํํํ๋ค. JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ HTML๋ก ํ์ํ๊ธฐ ๋๋ฌธ์ HTML์ ๊ธฐ๋ฐ์ ๋๊ฑฐ ๊ฐ์ง๋ง, ์ฌ์ค์ XML์ ๋ฐํ์ผ๋ก ์ ์๋ ๊ฒ์ด๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ HTML์ ํํํ๋ ๊ฒ์ ๋์์ฃผ๊ธด ํ์ง๋ง, ์์ ํ HTML์ ์๋ ๊ฒ์ด๋ค. ๋ฆฌ์ํธ์ ์ปดํฌ๋ํธ๋ค์ ๊ผญ JSX๋ก ์์ฑํ ํ์๋ ์๊ธด ํ์ง๋ง, JS ์ฝ๋์์์ ์์๋ฅผ ๋ฃ์ ์ ์๋ ๊ฒ์ ์ฝ๋์ ์ผ๋ก ์ข๊ฒ ๋น์น ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ค์ด ๋ฆฌ์ํธ๋ฅผ ๊ฐ๋ฐํ ๋ JSX๋ฅผ ์ ์ฉํ๋ค.
์ฐ๋ฆฌ๊ฐ HTML๋ก ์ฝ๋๋ฅผ ์ง๋ฉด์ ํด๋์ค๋ฅผ ์ ์ํ๊ณ ์ถ์๋ ๋ค์๊ณผ ๊ฐ์ด ์ ๋ ฅํ๋ค.
<div class="Hello">
</div>
๊ทธ๋ฌ๋ ๋ฆฌ์ํธ์์๋ ํด๋์ค ์ ์๋ฅผ ํ๊ณ , ์ปดํฌ๋ํธ์ ์ ์ฉ์ ํ๊ธฐ ์ํด์๋ ๋ค์๊ณผ ๊ฐ์ด ํ ํ์๊ฐ ์๋ค.
function App(){
return(
<div className="Hello">
</div>
}
}
์ฌ๊ธฐ์ ๋์ ๋๋ ์ฐจ์ด๋ App ์ด๋ผ๋ ํจ์๊ฐ Hello ๋ผ๋ ์ด๋ฆ์ผ๋ก ์ ์ํ๋ ์ปจํ ์ด๋ ์์๋ฅผ ๋ฐํ ํ๋ค๋ ๊ฒ์ด๋ค. ์ด๋ ๋ฏ JSX๋ div์ ๊ฐ์ด ์์๋ค์ ํ๋๋ก ๋ฌถ์ ์ปจํ ์ด๋๋ฅผ ๋ฐํํด์ผ ํ๋ค๋ ๊ท์น์ ๊ฐ์ง๊ณ ์๋ค.
์ด๋ ๊ฒ ๋ง๋ค์ด์ง๋ JSX ์ฝ๋๋ค์ Babel ์ด๋ผ๋ ์ปดํ์ผ์ ์ด์ฉํด ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ฒ๋ฆฌํ ์ ์๋ JS ์ฝ๋๋ก ๋ณํ์ํจ๋ค.
class? className?
์์์ ๋งํ๋ฏ, JSX๋ HTML์ ์์ ํ ๊ธฐ๋ฐ์ ๋ ๊ฒ์ด ์๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ์์ฑ์ด๊ธด ํ์ง๋ง, ์ ์ํ๋ ๋ฐฉ๋ฒ์ ๋ค๋ฅธ ๊ฒ์ด๋ค.
'IT Dictionary' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํจํท ํธ๋ ์ด์(Packet Tracer) ์ด์ ๋ฆฌ (2) | 2023.05.16 |
---|---|
๋ฆฌ๋ ์ค(Linux) ํฐ๋ฏธ๋ ํ์ ๋ช ๋ น์ด ์ ๋ฆฌ (1) | 2023.05.06 |
์นดํ24(Cafe24) react, nodejs ๋น๋, ๋ฐฐํฌ, ํธ์คํ ํ๊ธฐ (8) | 2023.05.01 |
๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋ ๋๋ฒ๊น (Vscode Debugging) (13) | 2023.04.29 |
์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ (Sorting Algoritm) ๊ฐ๋ ์ ๋ฆฌ (0) | 2023.04.29 |