1. ๋ฆฌ์กํธ ๊ธฐ๋ณธ๊ฐ๋
โ ๋ฆฌ์กํธ๋?
๋ฆฌ์กํธ(React)๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ๋ฆฌ์กํธ์ ์ฃผ์ ํน์ง๊ณผ ๊ฐ๋ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ: ๋ฆฌ์กํธ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์กฐ๊ฐ์ธ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํฉ๋๋ค.
- ๊ฐ์ DOM (Virtual DOM): ์ค์ DOM์ ๊ฐ๋ฒผ์ด ๋ณต์ฌ๋ณธ์ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ์ ์ต์ ํํฉ๋๋ค.
- ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ: ๋ฐ์ดํฐ๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก ํ ๋ฐฉํฅ์ผ๋ก๋ง ํ๋ฆ ๋๋ค.
- JSX: JavaScript์ ํ์ฅ ๋ฌธ๋ฒ์ผ๋ก, HTML๊ณผ ์ ์ฌํ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ๊ตฌ์กฐ๋ฅผ ์ ์ํฉ๋๋ค.
- ์ํ ๊ด๋ฆฌ: ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ณ ์ ๋ฐ์ดํธํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค.
๋ฆฌ์กํธ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ๋๋ฆฌ ์ฌ์ฉ๋๋ฉฐ, ํจ์จ์ ์ด๊ณ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ UI๋ฅผ ๋ง๋๋ ๋ฐ ๋์์ ์ค๋๋ค.
โ SPA
single page application
spa ๋ฐฉ์์ด๋ค
SPA๋ Single Page Application์ ์ฝ์์ ๋๋ค. SPA๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ ๋ฐฉ์ ์ค ํ๋๋ก, ๋จ์ผ ํ์ด์ง๋ก ๊ตฌ์ฑ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ฏธํฉ๋๋ค. ์ด ๋ฐฉ์์ ์ฃผ์ ํน์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ํ์ด์ง ๋ก๋: ์ด๊ธฐ์ ๋จ ํ ๋ฒ๋ง ์ ์ฒด ํ์ด์ง๋ฅผ ๋ก๋ํ๊ณ , ์ดํ์๋ ํ์ํ ๋ฐ์ดํฐ๋ง ๋น๋๊ธฐ์ ์ผ๋ก ๊ฐฑ์ ํฉ๋๋ค.
- ์ฌ์ฉ์ ๊ฒฝํ: ํ์ด์ง ์ ์ฒด๋ฅผ ๋ค์ ๋ก๋ํ์ง ์๊ธฐ ๋๋ฌธ์, ๋ ๋น ๋ฅด๊ณ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ์๋ฒ ๋ถํ ๊ฐ์: ํ์ํ ๋ฐ์ดํฐ๋ง ์์ฒญํ๋ฏ๋ก ์๋ฒ์ ๋ถํ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
- ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง: ๋๋ถ๋ถ์ UI ๋ ๋๋ง ์์ ์ด ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ ) ์ธก์์ ์ด๋ฃจ์ด์ง๋๋ค.
SPA๋ ํ๋์ ์ธ ์น ๊ฐ๋ฐ์์ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๋ฐฉ์์ผ๋ก, React, Angular, Vue.js ๋ฑ์ ํ๋ ์์ํฌ๋ฅผ ํตํด ๊ตฌํํ ์ ์์ต๋๋ค.
โ webpack
webPack ๋ฒ๋ค๋ฌ ๋ฐฉ์ (ํ๋๋ก ๋ฌถ์ด์ ๊ฒฝ๋ํ์์ผ ๊ฒฐ๊ณผ๋ฌผ ๋ง๋ค์ด์ค)
Webpack์ ํ๋์ ์ธ JavaScript ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์ ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ์ฃผ์ ํน์ง๊ณผ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ชจ๋ ๋ฒ๋ค๋ง: ์ฌ๋ฌ ๊ฐ์ JavaScript ํ์ผ๊ณผ ๊ธฐํ ๋ฆฌ์์ค(CSS, ์ด๋ฏธ์ง ๋ฑ)๋ฅผ ํ๋ ๋๋ ์ฌ๋ฌ ๊ฐ์ ํ์ผ๋ก ๋ฌถ์ด์ค๋๋ค.
- ์์กด์ฑ ๊ด๋ฆฌ: ๋ชจ๋ ๊ฐ์ ์์กด์ฑ์ ์๋์ผ๋ก ๋ถ์ํ๊ณ ๊ด๋ฆฌํฉ๋๋ค.
- ์ฝ๋ ์ต์ ํ: ๋ถํ์ํ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ณ , ์ฝ๋๋ฅผ ์์ถํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
- ๊ฐ๋ฐ ์๋ฒ: ์ค์๊ฐ ๋ฆฌ๋ก๋ฉ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ํตํด ๊ฐ๋ฐ ํจ์จ์ฑ์ ๋์ ๋๋ค.
- ๋ก๋ ์์คํ : ๋ค์ํ ์ ํ์ ํ์ผ์ ์ฒ๋ฆฌํ ์ ์๋ ๋ก๋๋ฅผ ์ ๊ณตํ์ฌ JavaScript ์ธ์ ๋ฆฌ์์ค๋ ๋ชจ๋๋ก ์ฌ์ฉํ ์ ์๊ฒ ํฉ๋๋ค.
Webpack์ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฐ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ , ์ต์ ํ๋ ๋ฒ๋ค์ ์์ฑํ์ฌ ์น ์ฑ๋ฅ ํฅ์์ ๊ธฐ์ฌํฉ๋๋ค.
โ virtual DOM
js ๋ฐ์ดํฐ ๊ฐ์ ธ์์ ์ง์ ์ ํธ๋ค๋ง
view ๊ฐ ๋ฐ๋๋ฉด (๋ณํ) ์ง์ฐ๊ณ ๋ค์ ๊ทธ๋ ค์ค
ํ๋ฉด์์ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ๊ฐ์งํจ
virtual DOM (๋ฐ๋๋ถ๋ถ๋ง ๋ถ๋ถ์ ์ผ๋ก ๋ฆฌ๋ ๋๋งํด์ค๋ค(
React์ Virtual DOM (๊ฐ์ DOM)์ ์ค์ DOM์ ๊ฐ๋ฒผ์ด ๋ณต์ฌ๋ณธ์ผ๋ก, React๊ฐ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐ ์ฌ์ฉํ๋ ํต์ฌ ๊ฐ๋ ์ ๋๋ค. ์ฃผ์ ํน์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ํ๋ฉด์์ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ๊ฐ์งํฉ๋๋ค.
- ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ๋ถ๋ถ์ ์ผ๋ก ๋ฆฌ๋ ๋๋งํฉ๋๋ค.
์ด๋ฌํ ๋ฐฉ์์ผ๋ก Virtual DOM์ ์ค์ DOM์ ์ง์ ์กฐ์ํ๋ ๊ฒ๋ณด๋ค ํจ์จ์ ์ผ๋ก UI๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ํนํ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฑ๋ฅ ํฅ์์ ํฌ๊ฒ ๊ธฐ์ฌํฉ๋๋ค.
โ Jsx
js ๊ฐ์ง๋ง html+js๋ฅผ ๋ น์ฌ์ ์ฌ์ฉํ ์์๊ฒ ํผํฉ๋ .jsx
jsํ์ฅ ๋ฌธ๋ฒ
JSX(JavaScript XML)๋ React์์ ์ฌ์ฉ๋๋ JavaScript์ ํ์ฅ ๋ฌธ๋ฒ์ ๋๋ค. JSX์ ์ฃผ์ ํน์ง๊ณผ ์ฌ์ฉ ๋ชฉ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- HTML๊ณผ ์ ์ฌํ ๊ตฌ๋ฌธ: JSX๋ JavaScript ์ฝ๋ ์์์ HTML๊ณผ ์ ์ฌํ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ฌ UI ๊ตฌ์กฐ๋ฅผ ์ ์ํ ์ ์๊ฒ ํด์ค๋๋ค.
- ์ปดํฌ๋ํธ ๊ตฌ์กฐํ: JSX๋ฅผ ํตํด React ์ปดํฌ๋ํธ๋ฅผ ๋ ์ง๊ด์ ์ด๊ณ ๊ตฌ์กฐํ๋ ๋ฐฉ์์ผ๋ก ์์ฑํ ์ ์์ต๋๋ค.
- JavaScript ํํ์ ์ฝ์ : ์ค๊ดํธ {}๋ฅผ ์ฌ์ฉํ์ฌ JSX ๋ด์ JavaScript ํํ์์ ์ฝ๊ฒ ์ฝ์ ํ ์ ์์ต๋๋ค.
- ์ ์ธ์ UI: JSX๋ฅผ ์ฌ์ฉํ๋ฉด UI๊ฐ ์ด๋ป๊ฒ ๋ณด์ฌ์ผ ํ๋์ง๋ฅผ ์ ์ธ์ ์ผ๋ก ๊ธฐ์ ํ ์ ์์ด, ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ด ํฅ์๋ฉ๋๋ค.
- JSX๋ React์์ ํ์๋ ์๋์ง๋ง, ๋๋ถ๋ถ์ React ๊ฐ๋ฐ์๋ค์ด UI ์์ ์ ํ ๋ JSX๋ฅผ ์ฌ์ฉํ์ฌ ๋ ํจ์จ์ ์ผ๋ก ๊ฐ๋ฐํฉ๋๋ค.
โ web pack loader
์๋ ๋ฆฌ๋ก๋๋จ (์ ์ฅํ๋ฉด)
์นํฉ ๋ก๋๋ ์ง์ ์ค์น๊ฐ ๊ฐ๋ฅํ๋ค.
๋ณด์ผ๋ฌ ํ๋ ์ดํธ๋ก ๋ง๋ค ๊ฒฝ์ฐ๋ ์๋ ์ค์ ๋๋ค.
์นํฉ ๋ก๋์์ babel ๋ผ๋ ๋๊ตฌ๊ฐ es6๋ฅผ es6๋ก ๋ค์ด๊ทธ๋ ์ด๋ ์ํด
โnpm
ํจํค์ง ๊ด๋ฆฌ์
๋ค์ด or ๊ด๋ฆฌ
โnpx
npm ์ ๊น๋ ค์๋ ํ๋์ ํจํค์ง๋ฅผ ์คํ์์ผ์ฃผ๋ ์คํ ๋๊ตฌ ์ด๋ค.
โyam
npm, npx ๊ฒฐ๊ณผ ๋ค๋ฅธ ํจํค์ง์ธ๋ฐ
(maven, gradle ๊ฐ์ด ๋๋ค๋ฅธ ํจํค์ง ๊ด๋ฆฌ์์ด๋ค)
โpublic
css > public ํด๋์ ๋ฃ์ด์ ์ฌ์ฉ (์ ํธ๋๋๋ฐฉ์์์๋
2. React ์ค์น ๋ฐฉ๋ฒ
โ https://nodejs.org/en/download/prebuilt-installer
20.17 ๋ค์ด๋ก๋
ctrl + c : ์ค์ง
npm start : ์์
3. ๋ฆฌ์กํธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ
<ul>
<h3> </h3>
<li> js ํ์ผ์ jsx ๋ผ๊ณ ๋ถ๋ฆ
๋๋ค. ์ฃผ์์ alt+shift+a</li>
<li> jsx ๋ฌธ๋ฒ์ ๋ฐ๋์ ํ๋์ ํ๊ทธ๋ฅผ ๋ฆฌํด ํด์ผํ๋ค.</li>
<li> div ๋ฅผ ์ฌ์ฉํด์ ๋ฌถ์ด๋ ๋๊ณ , Fragment, <></> ๋ชจํ์ผ๋ก ๋ฌถ์ด์ค๋ค. </li>
<li> ๋ณ์ ๊ฐ์ ์ฌ์ฉํ ๋๋ {name} ๋ก ์ฐธ์กฐํจ </li>
<li> if ๋ฌธ ๋ณด๋ค๋ ์ผํญ์ฐ์ฐ์ ์ฌ์ฉ</li>
<li> ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ฌธ์ฅ์ด ์๋ค๋ฉด null ๋ฆฌํด, undefined ๋ฐํ ๊ฐ๋ฅํ์ง๋ง ์ง์ </li>
<li> dom ์์์ css ๋ฅผ ์ง์ ๋ฃ์ ๋ ๊ฐ์ฒดํ์ผ๋ก ๋ฌถ์ด์ผํ๋ค, ์์ฑ์ ์นด๋ฉ ํ๊ธฐ๋ฒ์ผ๋ก ์ฌ์ฉ !</li>
<li> class ์์ฑ์ className ์์ฑ์ผ๋ก ๋ณ๊ฒฝ๋จ</li>
<li> ํ๋ก ์ฌ์ฉ๋๋ ํ๊ทธ๋ ๋ฐ๋์ / ๋ก ๋ซ๋ ํ๊ทธ ์์ฑ {/* <input /> */}</li>
<li> </li>
</ul>
4. ๋ฆฌ์กํธ ์ค์ต
function App() {
let name = "ํ๊ธธ๋";
return (
<>
<div className="ex">
<input name="name" />
</div>
<div style={{color:"red" , backgroundColor:"yellow", fontSize : 20}}>
{ name === 'ํ๊ธธ๋' ? '๋ฆฌ์กํธ ์
๋๋ค.' : '๋ฆฌ์กํธ๊ฐ ์๋๋๋ค' }
</div>
</>
);
}
export default App;
<div className="ex">
<input name="name" />
</div>
ํด๋์ค ์์ฑ ์ฃผ๊ธฐ๋ className ์ฌ์ฉ
input ํ๊ทธ์ name ์์ฑ ์ฃผ๋ ๋ฐฉ๋ฒ
<div style={{color:"red" , backgroundColor:"yellow", fontSize : 20}}>
{ name === 'ํ๊ธธ๋' ? '๋ฆฌ์กํธ ์
๋๋ค.' : '๋ฆฌ์กํธ๊ฐ ์๋๋๋ค' }
</div>
name ๊ฐ์ด ํ๊ธธ๋์ด๋ฉด ๋ฆฌ์กํธ์ ๋๋ค (ํ์ฌ ํ๊ธธ๋์ธ ์ํ)
์๋๋ฉด ๋ฆฌ์กํธ๊ฐ ์๋๋๋ค๋ฅผ ์ถ๋ ฅํ๋ค.