์ค๋น Node.js ์ค์นํ๊ธฐ (์์ ์ ๋ฐ์๊ฑฐ๋ ๋งฅ๋ถ์ด๊ฑฐ๋ ์๊ด์์ด ๋ฌด์กฐ๊ฑด ์ต์ ๋ฒ์ ์ ์ค์นํ๊ณ ๋ฆฌ์กํธ๋ฅผ ์ค์นํ๋ ๊ฒ์ด ์ค๋ฅ๊ฐ ์ ๋ค.) ์ฝ๋ ์๋ํฐ ์ค์นํ๊ธฐ Create React App ๋ฆฌ์กํธ ํ๊ฒฝ์ด ๊ตฌ์ถ๋๊ณ ๋๋ฉด locallhost:3000์์ ๊ธฐ๋ณธ ํ๋ฉด
props๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก ๋ถํฐ ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๋ฐฉ์์ผ๋ก, ๋ถ๋ชจ์ props๋ฅผ ์ฌ์ฉํ๋ฉด ์์ component์ ์ธ์๋ก object๊ฐ ๋ค์ด๊ฐ๊ฒ ๋ฉ๋๋ค.๊ทธ๋ฆฌ๊ณ props์๋ sting, number, boolean, function ๊ฐ์ ๋ค์ํ ๊ฒ๋ค
๋ฆฌ์กํธ๋ SPA(Single Page Application) ๋ฐฉ์์ผ๋ก์จ, ์ฌ๋ฌ๊ฐ์ ํ์ด์ง๋ฅผ ์ฌ์ฉํ๋ฉฐ, ํ๋์ ํ์ด์ง ์์์ ํ์ํ ๋ฐ์ดํฐ๋ง ๊ฐ์ ธ์ค๋ ํํ๋ฅผ ๋งํฉ๋๋ค.๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค๋ฉด ์๋ก์ด ํ์ด์ง๋ฅผ ๋ก๋ํ ๋๋ง๋ค ์๋ก์ด ํ์ด์ง๋ฅผ ๋ก๋ํ๋ ๋ฐฉ์์ MPA(Mult
github pages๋ github์์ ์ ๊ณตํ๋ ๋ฌด๋ฃ ์๋น์ค๋ก html, css, js๋ฅผ ์ ๋ก๋ํ๋ฉด ์น์ฌ์ดํธ๋ก ๋ง๋ค์ด์ ๋ฌด๋ฃ ๋ฐฐํฌ๋ฅผ ํด์ค๋๋ค. ์ด๋ฒ ๊ธ์์๋ React ์์ ์ ํฐ๋ฏธ๋์์ ๋ฐ๋ก github pages๋ฅผ ์ฌ๋ฆฌ๊ณ ์ ๋ฐ์ดํธํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค. ๐ง
์์ ํด๋๊ฒฝ๋ก์์ ํฐ๋ฏธ๋์ ์คํํ ๋ค์ค์น๊ฐ ๋ค ๋์๋ค๋ฉด .jsํ์ผ์ ์ ๋ถ .tsxํ์ผ๋ก ๋ฐ๊ฟ์ ์ฌ์ฉ๊ฐ๋ฅํฉ๋๋ค.(React๋ก ์์ ์ ํ์ง ์๋๋ค๋ฉด .tsํ์ผ๋ก ์ฌ์ฉ)ํ์ผ์ ์ ๋ถ ๋ณ๊ฒฝํด์ค ๋ค npm start๋ก ์๋ฒ๋ฅผ ์ฌ์์ ํด์ค๋๋ค.์๋ก ์์ ํ ํด๋ ์์ฑ ํ IDE์ ํฐ๋ฏธ
๐จ ์ด ๊ธ์ ๋ ธ๋ง๋ React JS ๋ง์คํฐ ๊ฐ์๋ฅผ ๋ณธ ํ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํ ์ธ๊ธ ์์ด ๊ฐ์๋ฅผ ๋ณด๋ฉด์ ์๋ก ์ตํ Hooks๋ Componenet, Library ๋ฑ์ ๊ฐ๋ตํ๊ฒ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๐ฉโ๐ป ๊ฐ๋ฐํ๊ฒฝ ์ธํ react-typescript
React Hook Form ์ฌ์ฉํ๊ธฐ ์ฌ์ด ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ํตํด ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ์ ์ฐํ๋ฉฐ ํ์ฅ ๊ฐ๋ฅํ form์ ๋๋ค. ๊ณต์๋ฌธ์ ๋ณด๊ธฐ ์ฌ์ฉํ๋ ๋ฒ React-hook-form ์ค์นํ๊ธฐ ๋ช ๋ น์ด๋ฅผ ์ ๋ ฅํด์ฃผ์ธ์. Form register register ์์ฝ์ด๋ฅผ ์ฌ์ฉํ๋ฉด
Set up ๋ช ๋ น์ด๋ฅผ ์คํ์์ผ์ฃผ๋ฉด ๋! How to use Atom.ts ํ์ผ ์์ฑ useRecoilValue() atom์ผ๋ก๋ถํฐ ๊ฐ์ ๋ถ๋ฌ์ฌ ๋ ์ฌ์ฉํฉ๋๋ค. useSetRecoilState() atom์ ๊ฐ์ ๋ณ๊ฒฝํ ๋ ์๋๋ค. useRecoilState()
react-beautiful-dnd React๋ก ์๋ฆ๋ต๊ณ ์ ๊ทผ์ฑ์ด ์ข์ ๊ทธ๋๊ทธ ์ค ๋๋กญ ๋ฆฌ์คํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ๋์์ฃผ๋ ํจํค์ง ์ ๋๋ค. ์ค์น DragDropContext DragDropContext๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋๋๊ทธ์ค๋๋กญ์ ๊ฐ๋ฅํ๊ฒ ํ๊ณ ์ถ์ ์ฑ์ ํ ๋ถ๋ถ์ ๋๋ค
Framer Motion React์์ ์ฌ์ฉํ ์ ์๋ production-ready ๋ชจ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋๋ค. ๊ณต์ ํํ์ด์ง ๊ณต์ GitHub ์ค์น react ๋ฒ์ 4๋ฅผ ์ฌ์ฉํ๋ ๋ถ๋ค์ CRACO๋ฅผ ์ด์ฉํด ์๋ฌ๋ฅผ ํด๊ฒฐํ์ธ์. CRACO(Create React App
๊ณต๋ถ๋ฅผ ํ๋ฉด์ ์ฃผ๋ก ์คํ API๋ฅผ ๊ฐ์ง๊ณ ํ์๋๋ฐ,์ด๋ฒ์ ํผ์ ๋ง๋ ๊ฐ์ธ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ์ฒ์์ผ๋ก๋ก์ปฌ ์ด๋ฏธ์ง๋ฅผ ์ด๋ป๊ฒ CRAํ๋ก์ ํธ์ ๊ฐ์ ธ์์ผํ๋์ง์ ๋ํด ๊ณ ๋ฏผ์ ํ๊ฒ ๋์์ต๋๋ค.๊ทธ๋ฆฌ๊ณ ๊ณต๋ถํ ๋ด์ฉ์ ๊ธฐ๋ก์ผ๋ก ๋จ๊ฒจ๋ณด๋ ค ํฉ๋๋ค.webpack์ ์ํด ๊ด๋ฆฌ๋์ง ์์ต๋๋ค.
๋ค์ด๊ฐ๊ธฐ์ ์์ ์ด ๊ธ์ Styled components์ themePorvider์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ์ง์์ด ์์ด์ผํ๋ฉฐ, react-responsive ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ๋ฒ์ ๋ํ ๋ด์ฉ์ ๋ค๋ฃจ์ง ์์ต๋๋ค. ๋ฐ์ํ ์น (Responsive Web) ํ๋ธ๋ฆฟ, PC, ๋ชจ๋ฐ์ผ ๋ฑ
์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ๋ทฐ๋ก ์ด๋ ํ ๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ทฐ๋ฅผ ๋์ ์ผ๋ก ๋ค์ ๊ทธ๋ ค์ค๋๋ค.SPA๋ MPA ๋๋น ํ์ด์ง ๊ฐ ์ด๋ ์ ์ฌ์ฉ์๊ฐ ๋๋ ์ ์๋ ๋๋ ์ด๋ฅผ ์ ๊ฑฐํด ๋ ๋์ UX๋ฅผ ์ ๊ณตํฉ๋๋ค.(= ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจ ํ์ง ์์ต๋๋ค.)React๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋ผ์ฐํ ์์คํ ์ ๊ฐ์ถ
์ฝ๋๋ฅผ ์์ฑํ๋ค๋ณด๋ฉด ์๊ฐ์๊ฐ ๊ณ ๋ฏผ๋๋ ๋ถ๋ถ๋ค์ด ์์ต๋๋ค. ์ง๊ธ ๋ด๊ฐ ์ด ์ฝ๋๋ฅผ ๋์ค์ ๋ค์ ๋ณด๊ฑฐ๋ ๋ค๋ฅธ ์ฌ๋๋ค์ด ์ฝ์์ ๋ ๊ณผ์ฐ ์ฝ๊ฒ ์ดํดํ ์ ์์๊น๋ผ๋ ์๊ฐ์ ํ๋ค๊ฐํด๋ฆฐ์ฝ๋๋ผ๋ ๊ธ์ ์ฝ๊ณ , ๋ค์ ์ ๋ฆฌํ๋ ๊ธ์ ์ฐ๊ฒ ๋์์ต๋๋ค. ํ๋์ ์ํ๋ง์ ์ํ ์ํ ๋ ๋๋ง ๋ง
useMemo์ useCallback์ ๋ํด ์์๋ณด๊ธฐ ์ ์ Memoization์ ๋ํด ์์์ผ ํฉ๋๋ค. ๋ฉ๋ชจ์ด์ ์ด์ (Memoization)์ด๋ ๋ฉ๋ชจ์ด์ ์ด์ ์ ์๊ณ ๋ฆฌ์ฆ ์๊ฐ์ ์์ฃผ ๋์ค๋ ๊ฐ๋ ์ด๋ผ๊ณ ํฉ๋๋ค. memoization์ด๋ ๊ธฐ์กด์ ์ํํ ์ฐ์ฐ์ ๊ฒฐ๊ณผ๊ฐ์ ์ด๋๊ฐ์