๋ฆฌ์กํธ์ ๋ฐ์ดํฐ ํ๋ฆ์ ๋จ๋ฐฉํฅ ํ๋ฆ์ด๊ธฐ ๋๋ฌธ์ ๋ถ๋ชจ โ ์์์ผ๋ก ํ๋ฌ์ผ ํจ์๋ฅผ ๋ค์ด ๋๊ท๋ชจ ํ๋ก์ ํธ ์ผ ์๋ก ๋ฐ์ดํฐ์ ๋ณํ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ์ปดํฌ๋ํธ๋ค์ด ์ฆ๊ฐํ๊ฒ ๋จ์ํ ์ ๋ฐ์ดํธ ๋ํ ํ๋ฆ์ ์ง์ผ์ผ ํ๊ธฐ ๋๋ฌธ์ ์๋นํ ๋ณต์กํ ๊ณผ์ ์ ๊ฑฐ์น๊ฒ ๋จโ ์ ์ง๋ณด์๊ฐ ์ ์ ํ๋ค์ด์ง๋ฐ
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์ฅ ๋ฆฌ์กํธ ์์