์ทจ์ ์ ํ ๋ ์ค์ํ ๋์๋ ์์ ๊ฒ์ด๋ผ๋ ๋ง๋ค์ด๋ผ ์ ์๊ณ , ์์ด๋์ด๋ฅผ ํ์คํ ์ํค๋ ๊ฒ์ ์ฌ๋ฏธ๋ฅผ ๋๋ผ๋ ๊ฒ. ํ๊ณ์ ๋ด์ฐฉํ์ ๋, ํ๊ณ๋ฅผ ๋์ ์ ์๋ ํ๋ ์์ผ๋ฉด ์ข์. ์๋ฃ๊ตฌ์กฐ ๋ฐ ์๊ณ ๋ฆฌ์ฆ์ ์ด๋ ค์ธ ์ ์์ผ๋ ์ข์ ํ์ง ๋ง์.
git checkout์ ์ ์๋ : git์ head๋ฅผ ์์ง์ด๋ ๊ฒ.
git commit์ ํ ๋, node_modules ๋๋ ํ ๋ฆฌ๋ gitignore๋ก ์ค์ ํ์ฌ ๋ฐฐ์ ํ๋ค.
- ์ ํต์ ์ธ ํ์ด์ง: ์ต์ด์ ์๋ฒ๋ก๋ถํฐ HTML์ ์ ๋ฌ ๋ฐ๊ณ ๋ฐ์ดํฐ๋ฅผ Form Post ํํ๋ก ์ ๋ฌํ๊ณ , ํ์ด์ง์ ๋ณ๊ฒฝ์ด ํ์ํ ๋ ๋ค์ ์๋ฒ์ ์์ฒญํด์ HTML์ ์ ๋ฌ๋ฐ์ (ํ์ด์ง๋ฅผ ์ฒ์๋ถํฐ ๋ค์ ๋ถ๋ฌ์จ๋ค.)
- SPA: ์ต์ด์ ์๋ฒ๋ก๋ถํฐ HTML์ ์ ๋ฌ ๋ฐ๊ณ ๋ฐ์ดํฐ๋ฅผ AJAX ํต์ ์ผ๋ก ์ ๋ฌํ๋ฉฐ, ํ์ด์ง์ ๋ณ๊ฒฝ์ด ํ์ํ ๋ ๋ณ๊ฒฝ์ด ํ์ํ ๋ถ๋ถ์ JSON์ผ๋ก ์ ๋ฌ ๋ฐ๋๋ค. (ํ์ด์ง์์ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ๊ณ์ฐํ์ฌ ๋ค์ ๊ทธ๋ฆฐ๋ค.)
์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI)๋ฅผ ๋ง๋ค๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- Component
React์์ ์๋น์ค๋ฅผ ๊ฐ๋ฐํ๋ ๋ฐ ์์ด ์ชผ๊ฐ์ด ๊ตฌํํ๋ ๋ ๋ฆฝ์ ์ธ ๋จ์์ด๋ค.- Virtual DOM: (๊ฐ์ ๋ฌธ์๊ฐ์ฒด๋ชจ๋ธ)
๊ฐ์์ ์ธ ํํ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํ๊ณ ReactDOM๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ํด ์ค์ DOM๊ณผ ๋๊ธฐํํ๋ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋ - JSX
JavaScript ๋ด์์ UI๋ฅผ ์์ฑํ๊ธฐ ์ํด ๊ฐ๋ฐ์์๊ฒ ์ต์ํ ํ๊ฒฝ์ ์ ๊ณต, HTML๊ณผ ์ ์ฌํ๋ค.
2013๋ Facebook ์ฌ์์ ๋ฐํํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. Facebook๊ณผ Instagram ๋ฑ ์ฌ๋ด ์ํํธ์จ์ด์ ์ฌ์ฉํ ๋ชฉ์ ์ผ๋ก ๊ฐ๋ฐํ์ผ๋, ์ดํ ์คํ์์คํ ํ์๋ค.
์ธํฐ๋ ํฐ๋ธํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๊ฐ์ฅ ๋ง์ ์ธ๊ธฐ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
ํ๋ฐํ ์ปค๋ฎค๋ํฐ์ ํ๋์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๊ตฌ๊ฐ ๋ง์ด ๊ฐ๋ฐ๋๊ณ ์๋ค.
์์ฐ์ฑ/์ฌ์ฌ์ฉ์ฑ: Component์ Hook์ ํ์ฉ: ์์ ๋จ์์, ๋ ๋ฆฝ์ ์ธ ์์๋ก ๊ฐ๋ฐํ์ฌ ๊ฐ๋ฐ์์ ์์ฐ์ฑ๊ณผ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ธ๋ค.
ํ๋ถํ ์๋ฃ/๋ผ์ด๋ธ๋ฌ๋ฆฌ: ํ์ฌ React๋ ์ ์ธ๊ณ์ ์ผ๋ก ๊ฐ์ฅ ํ๋ฐํ๊ฒ ์ปค๋ฎค๋ํฐ ํ๋์ด ์ด๋ฃจ์ด์ง๊ณ ์์ด ๋ฐฉ๋ํ ์๋ฃ์ ํธ๋ฆฌํ ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฑ์ด ๊ณต์ ๋๊ณ ์๋ค.
๋ค์ํ ์ฌ์ฉ์ฒ: ๋จ์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ฟ๋ง ์๋๋ผ ํ ๋ฒ ๋ฐฐ์ด React์ง์์ React-Native์ ์ ์ฉํ์ฌ ์๋๋ก์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ๋ฐ iOS ์ ํ๋ฆฌ์ผ์ด์ ๋ฑ์ ๊ฐ๋ฐํ ์ ์๋ค.
<!--HTML/JS ์ฌ์ฉ--> <body> <span> <script> document.getElementById('text') .innerText = 'hello world'; </script> </span> </body>
๋ ์ด์์์ ๊ตฌ์ฑํ๋ HTML๊ณผ, UI ๋ด ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํ๋ JavaScript ๋ก์ง์ด ๋ถ๋ฆฌ๋์ด ์์ด ์ฝ๋ ํ์ ์ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฐ๋ค
<!--React์ฌ์ฉ--> const App = () => { const text = 'hello world'; return <span>{text}</span> }
JSX๋ฅผ ํ์ฉํ์ฌ HTML ๋ด์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ํ ๊ณต๊ฐ์ ์ฝ์ ํ ์ ์์ด ๊ฐ๋ฐ์ด ๊ฐ๋จํด์ง๊ณ ๋ค๋ฅธ ์ฌ๋์ด ๊ฐ๋ฐ ์๋๋ฅผ ํ์ ํ๊ธฐ ์ฌ์์ง๋ค.
Fluent UI, Redux, Mobx, Ant Design, React Hook Form, styled components ๋ฑ, ์ ์ ์์ ๋งํผ ๋ฐฉ๋ํ ์๋ฃ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ค.
- React: ํฌ๋กฌ ํ์ด์ดํญ์ค ๋ฑ ์น ๋ธ๋ผ์ฐ์ ์์ ์คํ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ.
- React-Native: ์๋๋ก์ด๋/iOS ๋ฑ์ ๋ค์ดํฐ๋ธ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ.
์น ์ ํ๋ฆฌ์ผ์ด์ ๋ฟ๋ง ์๋๋ผ ํ ๋ฒ ๋ฐฐ์ด React ์ง์์ React-Native์ ์ ์ฉํด์ ์๋๋ก์ด๋/iOS ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ์ ์๋ค.
React๋ ๋๊ท๋ชจ ์์ ์์ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ๋ค๋ฃฐ ์ ์์ง๋ง, ์๋ ๋ฉด์์๋ ๋ถ๋ฆฌํ ์ ์ด ์๋ค.
React๋ ์ปดํฌ๋ํธ ๋ด ๋ฐ์ดํฐ ๋ณ๊ฒฝ์ด ์์ ์, UI๋ฅผ ์๋์ผ๋ก ์ ๋ฐ์ดํธ ํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ด์ฟผ๋ฆฌ์ ๋น๊ตํ๋ฉฐ, ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ์ฝ๋๋ฅผ React๋ก ๋ณํ์์ผ๋ณด๊ณ React์ ํน์ง๊ณผ ์ฅ์ ์ ๋ชธ์ ์ตํ๋ณด๋ ๊ฒ์ด ์ข๋ค. React ๊ธฐ๋ฐ ๊ฐ๋ฐ์ ํ ๋๋ ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ตํ๋ ๊ฒ์ด ์ข๋ค.
React ํ๋ก์ ํธ๋ฅผ ์์ฑํ๊ณ , React์ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์์์ธ Component์ JSX์ ๋ํด ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํ๋ค.
Props์ State / ์ด๋ฒคํธ ์ฒ๋ฆฌ๋ฅผ ํตํด ์ปดํฌ๋ํธ๋ผ๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๊ณ , ์ปดํฌ๋ํธ ๋ด์์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฒ, ์ฌ์ฉ์์ ์ ๋ ฅ์ ์ฒ๋ฆฌํ๋ ๋ฒ์ ์๋ ๊ฒ.
Hooks
jQuery ์
$("#todo-list").append( `<li> <span>${value}</span> <button type="button" class="complete">์๋ฃ</button> <button type="button" class="remove">์ญ์ </button> </li>` );
React ์
<ol id="todo-list"> {todoList.map((item, idx) => ( <li className={item.isCompleted === true ? "completed" : ""}> <span>{item.value}</span> <button onClick={() => handleCompleteClick(idx)}>์๋ฃ</button> <button onClick={() => handleRemoveClick(idx)}>์ญ์ </button> </li> ))} </ol>
const App = () => { const text = 'Hello, React!'; return <span>{text}</span>
์ด๋ฌํ ํํ๋ก ํ๋์ '๋ธ๋ก'์ ์์ฑํ์ฌ ํ์ํ ๊ณณ์ ์กฐ๋ฆฝํ์ฌ ๊ฐ๋ฐํ๋ ๋ถํ๊ณผ ๊ฐ์ ๊ฒ์ ์ปดํฌ๋ํธ๋ผ๊ณ ํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ๋จ์์ HTML ์ฝ๋๋ฅผ ๋ฆฌํดํ๋ JSX ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ค.
const [todoList, setTodoList] = useState([]); const [inputValue, setInputValue] = useState('');
์ปดํฌ๋ํธ ๋ด์์ 'State'๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ ๋์ ์ผ๋ก ๊ด๋ฆฌํ๋ค.
State๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ปดํฌ๋ํธ๊ฐ ๋ค์ ๋ ๋๋ง(Rendering)๋๋ค.
์ ์ ๋ ธ๋ ฅ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ณด๋ค ํจ์ฌ ํจ์จ์ ์ผ๋ก ๋ง๋ค ์ ์๊ฒ ๋๋ ํ๋ ์์ํฌ.
๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด nodejs๋ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ๊ธฐ๋ฅผ ์ค์นํด์ผ ํ๋ค.
nodejs: ์ค์น๋ LTS ๋ฒ์ ์ ๊ถ์ฅํ๋ค.
nodejs ์ค์น ํ, React ๊ฐ๋ฐํ๊ฒฝ์ ๋ง๋ค๊ธฐ ์ํด ์ํ๋ ๋๋ ํ ๋ฆฌ๋ด์ ์์นํ ์ฑ๋ก, npx create-react-app .
๋ช
๋ น์ด๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐํ๊ฒฝ์ด ์๋์ผ๋ก ์ค์ ๋ฉ๋๋ค.
React ํ์ผ์ ์คํํ ๋์๋ npm start ๋ช
๋ น์ด ์ฌ์ฉ