๋ฆฌ์กํธ์ ๋ฐ์ดํฐ ํ๋ฆ์ ๋จ๋ฐฉํฅ ํ๋ฆ์ด๊ธฐ ๋๋ฌธ์ ๋ถ๋ชจ โ ์์์ผ๋ก ํ๋ฌ์ผ ํจ์๋ฅผ ๋ค์ด ๋๊ท๋ชจ ํ๋ก์ ํธ ์ผ ์๋ก ๋ฐ์ดํฐ์ ๋ณํ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ์ปดํฌ๋ํธ๋ค์ด ์ฆ๊ฐํ๊ฒ ๋จ์ํ ์ ๋ฐ์ดํธ ๋ํ ํ๋ฆ์ ์ง์ผ์ผ ํ๊ธฐ ๋๋ฌธ์ ์๋นํ ๋ณต์กํ ๊ณผ์ ์ ๊ฑฐ์น๊ฒ ๋จโ ์ ์ง๋ณด์๊ฐ ์ ์ ํ๋ค์ด์ง๋ฐ
axios๋ก ์ฝ๊ฒ ์ธ๋ถ ๋ฐ์ดํฐ๋ฅผ ํธ์ถํ์ฌ ์ฌ์ฉ๊ฐ๋ฅuseEffect๋ฅผ ํ์ฉํ์ฌ ์ฒ์ ๋ ๋๋ง ์์ ์ ๋ฐ์ดํฐ ํธ์ถuseEffect์ async๋ฅผ ์ฌ์ฉํ๋ฉด X โ useEffect์์ ๋ฐํํด์ผ ํ๋ ๊ฐ์ ๋ท์ ๋ฆฌ ํจ์ ์ด๊ธฐ ๋๋ฌธโ ๋ด๋ถ์ ๋ค๋ฅธ ํจ์๋ฅผ ๋ง๋ค์ด async/await
single page application์ ์ฝ์๋ก ํ๋์ ํ์ด์ง๋ก ์ด๋ฃจ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๋งํจ๊ธฐ์กด ์นํ์ด์ง๋ ํ์ด์ง ๋ณ๊ฒฝ ์ ์๋ฒ์ ์์ฒญํ๋ฉฐ ํ๋ฉด์ ์๋ก ๋ถ๋ฌ์ด์ด๋ฌํ ๋ฐฉ์์ ๋ง์ ํธ๋ํฝ์ ์๋ฒ์์ ๋ถ๋ดํด์ผํจSPA๋ ๋ทฐ ๋ ๋๋ง์ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ด๋นํ๊ณ ๋ก๋ฉ์ด ํ์
yarn add immer๋๊ฐ์ง ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉ์ฒซ๋ฒ์งธ - ์์ ํ๊ณ ์ถ์ state๋๋ฒ์งธ - ์ํ๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ์ ๋ฐ์ดํธ ํ ์ง ์ ์ํ๋ ํจ์๋๋ฒ์งธ ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌ๋๋ ํจ์ ๋ด๋ถ์์ ์ํ๋ ๊ฐ์ ๋ณ๊ฒฝํ๋ฉด produce ํจ์๊ฐ ๋ถ๋ณ์ฑ์ ์ ์ง๋ฅผ ๋์ ํด์ฃผ์ด ์๋ก์ด ์ํ๋ฅผ ์
๊ธฐ์กด ์ผ์ ๊ด๋ฆฌ ์ดํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋ง ์งํReact.memo ์ฌ์ฉonToggle, onRemove ๋ฆฌ๋ ๋๋ง ๋ฐฉ์งreact-virtualized ๋ ๋๋ง ์ต์ ํํ์ฌ๋ ํ๋์ ๊ฐ๋ง ์ฒดํฌํด๋ App์ ์ฐ๊ฒฐ๋์ด ์๋ state์ด ๋ณ๊ฒฝ ๋๊ธฐ ๋๋ฌธ๋ฐ๋ผ์ ํด๋น ์ปดํฌ๋ํธ ์๋ ์
node-sass, classnames, react-icons ์ค์นprettier ํ๋ก์ ํธ์์ ์ ์ํ๋ ์๊ตฌ์ฌํญ ์ค์ TodoTemplate - ํ๋ฉด ์ ์ฒด๋ฅผ ๊ฐ์ธ๋ ๋ ์ด์์ ์ปดํฌ๋ํTodoInsert - ํ ์ผ ์ ๋ ฅ ํผTodoList - ํ ์ผ ๋ชฉ๋ก ์ปดํฌ๋ํธTodoLis
๊ธฐ์กด css ์ฌ์ฉ์ฒ๋ผ ์์ฑ ํ importํ์ฌ ์ ์ฉyarn add node-sass๋ก ์ค์น์ฌ์ฉ ๋ฐฉ๋ฒ์ css์ ๋์ผ๊ณตํต์ผ๋ก ์ฌ์ฉํ๋ ๋ถ๋ถ์ ๋ถ๋ฆฌํ์ฌ ๊ด๋ฆฌํ๋ก์ ํธ ๋๋ ํ ๋ฆฌ๊ฐ ๊น์ด์ง๋ฉด ํด๋น ์คํ์ผ์ importํ ๋ ๋ถํธํ๊ธฐ ๋๋ฌธ์ ์ค์ ../../../../utils.sc
state๋ฅผ ์ค์ ํ ๋ ์ฌ์ฉ (ํ๋์ ์ํ๊ฐ๋ง ๊ด๋ฆฌ)ํ๋ผ๋ฏธํฐ - init ๊ฐ์ ๋ฃ์ด์ค๋ฆฌํด - state ๊ฐ, state๋ฅผ ์ค์ ํ๋ ํจ์์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋ ๋ง๋ค ํน์ ์์ ์ ์ํํ๋๋ก ์ค์ ๊ฐ๋ฅcomponentDidUpdate + componentDidMount ๋ฅผ
์ปดํฌ๋ํธ์ ๋ผ์ดํ์ฌ์ดํด์ด ์กด์ฌํ๋ฉฐ ํ์ด์ง์ ๋ ๋๋ง ์ ~ ํ์ด์ง๊ฐ ์ฌ๋ผ์ง ๋ ๋๋๋ค.ํด๋์คํ ์ปดํฌ๋ํธ์์๋ง ์ฌ์ฉ ํ ์ ์๊ณ ํจ์ํ์ Hooks์ ๊ธฐ๋ฅ์ผ๋ก ๊ตฌํ์ด ๊ฐ๋ฅ๋ผ์ดํ์ฌ์ดํด์ ์ข ๋ฅ๋ ์ด 9๊ฐWill ์ ๋์ฌ๊ฐ ๋ถ์ ๋ฉ์๋ - ์์ ์ด ๋์ํ๊ธฐ ์ ์คํDid ์ ๋์ฌ๊ฐ
arr.map(callback, \[thisArg])callback ํ๋ผ๋ฏธํฐcurrentValue - ํ์ฌ ๋ฐฐ์ด ๊ฐindex - ํ์ฌ ๋ฐฐ์ด์ indexarray - ํ์ฌ ์๋ณธ ๋ฐฐ์ดthisArg(์ ํ ํญ๋ชฉ) - callback ํจ์ ๋ด๋ถ์์ ์ฌ์ฉํ this์์์ปดํฌ๋ํธ ๋ฐฐ
DOM์ ์ง์ ์ ์ผ๋ก ๊ฑด๋๋ ค์ผ ํ ๋ ์ฌ์ฉํน์ Input์ ํฌ์ปค์ค ์ฃผ๊ธฐ์คํฌ๋กค ๋ฐ์ค ์กฐ์canvas ์์ ํ์ฉ์ฝ๋ฐฑ ํจ์๋ฅผ ํตํ ref ์ค์ ํจ์ ๋ด๋ถ์์ ์ ๋ฌ๋ฐ์ ref ํ๋ผ๋ฏธํฐ๋ฅผ ์ปดํฌ๋ํธ์ ๋ฉค๋ฒ ๋ณ์๋ก ์ค์ createRef ์ค์ ๋ฆฌ์กํธ ๋ด์ฅ ํจ์ (v16.3)์ปดํฌ๋ํธ์๋ r
event ์ด๋ฆ์ ํ๊ธฐ๋ฅผ camelCase๋ก ํ๊ธฐํด์ผ ํจ (onClick, onMouseOver)js ์ฝ๋๊ฐ ์๋ ํจ์ ํํ์ ๊ฐ์ ์ ๋ฌ ํด์ผํจDOM ์์์๋ง ์ด๋ฒคํธ๋ฅผ ์ค์ ํ ์ ์๋ค. (์ปดํฌ๋ํธ X)SyntheticEvent๋ ๋ธ๋ผ์ฐ์ native event์ ๋ฌ
ํจ์ํ ์ปดํฌ๋ํธ์ ๋ฌ๋ฆฌ state ๊ธฐ๋ฅ๊ณผ ๋ผ์ดํ ์ฌ์ดํด ๊ธฐ๋ฅ์ ์ฌ์ฉ ๊ฐ๋ฅ์์ ๋ฉ์๋๋ฅผ ์ ์ ๊ฐ๋ฅrender ํจ์๊ฐ ํ์๋ก ์์ด์ผ ํ๊ณ jsx๋ฅผ ๋ฐํํด์ผ ํจํจ์ํ์ ์ธํ๊ธฐ ํธํ๋ค๋ฉ๋ชจ๋ฆฌ ์์์ด ์๋คstate, ๋ผ์ดํ ์ฌ์ดํด api๊ฐ ๋ถ๊ฐ๋ฅ ํ๋ค (Hooks์ ์ถ๊ฐ๋ก ํด๊ฒฐ)ํด
[๊ฐ์ธ ์คํฐ๋] ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ - 2์ฅ JSX
[๊ฐ์ธ ์คํฐ๋] ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ - 1์ฅ ๋ฆฌ์กํธ ์์
Vue3์์ ์ ์ํ๋ ์๋ก์ด ๋ฐฉ์์ ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์๊ฐํ๋ ค๊ณ ํฉ๋๋ค. (composition api) Vue2์์๋ ์ ์ฉ์ด ๊ฐ๋ฅํ๊ณ ํ์ ์คํฌ๋ฆฝํธ์ ํจ๊ป ์ฌ์ฉํ๊ธฐ๋ ์ฉ์ดํ๊ธฐ ๋๋ฌธ์ ์ค๋ฌด์ ์ ์ฉํ๋ ๊ฒ๋ ์๊ฐ๋ณด๋ค๋ ์ด๋ ต์ง ์์์ต๋๋ค! ๐ฅณ
๊ธฐ์กด jsํ์ผ์์ ํด๋ ์์ฒด๋ฅผ importํ๋ ๊ฒ์ด ๋ถ๊ฐ๋ฅ ํฉ๋๋ค. ํ์ง๋ง Vue, React์ ๊ฐ์ ํ๋ ์์ํฌ์์ index ํ์ผ์ ์์ฑํ๋ฉด ํด๋ ์์ ๋ค์ด์๋ ํ์ผ ์ ์ฒด๋ฅผ import ํ๋๊ฒ ๊ฐ๋ฅํฉ๋๋ค! ์ค์ ๋ฐฉ๋ฒ์ import ํ ํด๋ ์์ index.js๋ฅผ ๋ง๋ค
Vue cli3 ์ด์๋ถํฐ๋ ํ๋ก์ ํธ๋ฅผ ์์ฑํ ๋ scss ๊ด๋ จ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค. ํ์ง๋ง ํ๋ก์ ํธ ์งํ ์ค๊ฐ์ scss๋ฅผ ์ ์ฉํ ์ผ์ด ์๊ฒจ ํด๋น ๋ด์ฉ์ ์ ๋ฆฌํ์์ต๋๋ค ๐์ ์ผ ๋จผ์ ํด๋น package์ node-sass์ sass-loader๋ฅผ ์ค์นํด์ค๋
์ฌ์ด๋ฒ ๊ณต๊ฒฉ์ ๊ฐ์์ฌ์ด๋ฒ ๊ณต๊ฒฉ์ธํฐ๋ท์ ํตํด ๋ค๋ฅธ ์ปดํจํฐ์ ๋ถ๋ฒ ์ ์ํ์ฌ ์๋๋ฐฉ ๊ตญ๊ฐ๋ ๊ธฐ์ , ๊ฐ์ธ์ ์์์ ์ ํ๋ ค๋ ํ๋๊ณผ๊ฑฐ์๋ ๋คํธ์ํฌ ํน์ ๋ก์ปฌ ํธ์คํธ ์์์์ ์๋ชป๋ ์ค์ ์ ์ด์ฉํด ๊ด๋ฆฌ์ ๊ถํ์ ์ ๋ ์ด๋ณด์ ๋ฐฉ์์ด ๋๋ค์๊ธฐ์ ์ ๋ฐ์ ์ ๋ฐ๋ผ ์ฌ์ด๋ฒ ๊ณต๊ฒฉ ๋ฐฉ์๋ ๋ค์
Vue ๊ณต์ ๋ฌธ์ ๊ธฐ๋ฐ์ผ๋ก ์์ฑํ ํ์ ์คํ์ผ ๊ฐ์ด๋์ ๋ํ ๋ด์ฉ ์ ๋ฆฌ์ ๋๋ค ๐์์ธํ ๋ด์ฉ์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค.Style Guide - Vue.js1\. ์ปดํฌ๋ํธ์ ์ด๋ฆ์ ํฉ์ฑ์ด๋ฅผ ์ฌ์ฉํ๋ค.html ํ๊ทธ์ ๊ฒฝ์ฐ ํ ๋จ์ด๋ก ํ๊ทธ๊ฐ ๊ตฌ์ฑ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ถฉ๋