React hooks๋ก ๊ตฌํํ Todo App
์ฌ์ฉ ๊ธฐ์ : React hooks, styled-components, express, node.js, babel, webpack
โ
- ํ ์ผ ์ถ๊ฐ, ์ญ์ , ์งํ์ํ ์ ๋ฐ์ดํธ, ์ ๋ฐ์ดํธ ์ทจ์ ๊ธฐ๋ฅ
- ํ ์ผ ๋ชฉ๋ก ์ ๊ธฐ, ํผ์น๊ธฐ ๊ธฐ๋ฅ
- ์งํ ์ํ ์ ๋ฐ์ดํธ ์ ํ์๋ถ๋ถ ํ์ด๋ผ์ดํ
- ๋ฆฌ์กํธ ๋ผ์ฐํฐ์ Router, Switch, Route ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ์ฌ ๋ผ์ฐํ ํ์์ต๋๋ค.
- Express์๋ฒ์์ history-fallback ์ฒ๋ฆฌํ์ฌ url๋ก ์ง์ ์ ๊ทผ์ด ๊ฐ๋ฅํฉ๋๋ค.
- ์ผ์นํ๋ url์ด ์๋ ๊ฒฝ์ฐ๋ Switch์ ๋ง์ง๋ง ์ปดํฌ๋ํธ(NoMatch) ๋ ๋๋งํฉ๋๋ค.
- Context API์ Reducer๋ฅผ ์ด์ฉํ์ฌ ์ํ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
- ์ปดํฌ๋ํธ๊ฐ ์ ๋ฌ์ด ํ์ ์๋ state๋ useState๋ฅผ ์ด์ฉํ์ฌ ์ํ๋ฅผ ๊ด๋ฆฌํ์์ต๋๋ค.(todoInput ๋ฐ folded)
useState, useReducer, useContext์ 3๊ฐ์ง hooks๋ก ์ํ๋ฅผ ๊ด๋ฆฌํ ๋, ๊ฐ๊ฐ์ ์ฅ๋จ์ ์ ๋ํ ๊ณ ๋ฏผ์ด ๋ง์์ต๋๋ค.
- <๊ฐ ์ปดํฌ๋ํธ ์ญํ >
- reducer : ๋ก์ง ๋ณด์ ํจ์
- ์ต์์ ์ปดํฌ๋ํธ : state, dispatch๋ณด์ , view์ปดํฌ๋ํธ ๋ ๋๋ง
- view์ปดํฌ๋ํธ : view๋ ๋๋ง, ์ก์ ํธ๋ฆฌ๊ฑฐ
- ๋น์ง๋์ค ๋ก์ง์ ๋ถ๋ฆฌ ๊ฐ๋ฅํฉ๋๋ค.
- props๋ฅผ ํตํด dispatch ๋ฉ์๋๋ฅผ ์ ๋ฌํ์ฌ ์ฌ์ฉํฉ๋๋ค.
- useState๋ง ์ฌ์ฉํ ๋์ ๋นํด state์ dispatch 2๊ฐ์ง๋ง ์ ๋ฌํ๋ฉด ๋๋ฏ๋ก ์ฝ๋๊ฐ ๋ณด๋ค ๊ฐ๊ฒฐํด์ง๋๋ค.
- ํธ๋ค๋ฌ ํจ์๋ view์ปดํฌ๋ํธ์ ์์นํ๊ณ dispatch๋ฅผ ํธ๋ค๋ฌ ๋ด์์ ์คํํฉ๋๋ค.
- ๊ฐ view์ปดํฌ๋ํธ์์ ์ด๋ค action์ ํธ๋ฆฌ๊ฑฐํด์ผํ๋์ง๋ ์์์ผ ํฉ๋๋ค.
(๋ฐ๋๋ผ์์ ์ด๋ค ์ด๋ฒคํธ๊ฐ ํธ๋ฆฌ๊ฑฐ ๋์์ ๋, model์ ์ด๋ฒคํธ ๋ฐ์ ๋ด์ฉ์ ๋ฉ์์ง๋ก ์ ๋ฌํด์ฃผ๋ ๊ฒ๊ณผ ๋น์ทํ ๋๋)
- <๊ฐ ์ปดํฌ๋ํธ ์ญํ >
- context : ๋จ์ ์ ์ญ ๊ฐ์ฒด
- ์ต์์ ์ปดํฌ๋ํธ : state๋ณด์ , view์ปดํฌ๋ํธ ๋ ๋๋ง, (๋ก์ง ๋ณด์ )
- view์ปดํฌ๋ํธ : view๋ ๋๋ง, (๋ก์ง ๋ณด์ )
- context ์์ฒด๋ ๊ฑฐ์ ์๋ฌด ์ญํ ๋ ํ์ง ์๊ฒ ๋ฉ๋๋ค.
- state๋ฅผ ์์ ํ๋ ์ปดํฌ๋ํธ์ ์ญํ ์ด ์ปค์ง๋ ๊ฒฝํฅ์ด ์์ต๋๋ค.
(state๋ณด์ , view๋ ๋๋ง, ๋ก์ง ๋ณด์ -๋ก์ง์ ๋ทฐ์ ์์นํ ์๋ ์์) - ๋ก์ง์ด view์ ์์นํ๋ ๊ฒฝ์ฐ : setState๋ฅผ context์์ ๋ฐ์์ ์ฌ์ฉ
- ๋ก์ง์ด state์ ํจ๊ป ์์นํ๋ ๊ฒฝ์ฐ : ๋ก์ง(ํธ๋ค๋ฌํจ์)์ context์์ ๋ฐ์์ ์ฌ์ฉ
- state๋ฅผ provider๋ก ๋ถ๋ฆฌํ ์ ์์(๋ถ๋ฆฌํ๋๊ฒ context์ ์ญํ ์ ๋ณด๋ค ๋ช ํํ๊ฒ ํ๋ ๊ฒ ๊ฐ์์ ์ข์๋ณด์ ๋๋ค)
- <๊ฐ ์ปดํฌ๋ํธ ์ญํ >
- context : ์ ์ญ ๊ฐ์ฒด, state๋ณด์
- ์ต์์ ์ปดํฌ๋ํธ : view์ปดํฌ๋ํธ ๋ ๋๋ง
- view์ปดํฌ๋ํธ : view๋ ๋๋ง, ๋ก์ง ๋ณด์ (setState๋ฅผ context์์ ๋ฐ์์ ์ฌ์ฉ)
- ๋น์ง๋์ค ๋ก์ง์ ๊ฐ view์ ๋๋์ด ๊ด๋ฆฌํฉ๋๋ค.
- setState๋ฅผ context๋ก ๋๊ฒจ์ ๊ฐ view์์ ์ ๋ฌ๋ฐ์ ์ฌ์ฉํฉ๋๋ค.
- ๊ฐ ์ปดํฌ๋ํธ์ ํฌ๊ธฐ๊ฐ ์ ๋นํ๊ฒ ๋๋ ์ง๋๋ค.
- context์ ์ญํ ์ ์์์ง๋๋ค.(state๋ง ๋ณด์ ํ๊ณ ๋ก์ง์ ๊ฐ์ง ์๊ธฐ ๋๋ฌธ)
- view์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ๋จ์ด์ง ์ ์์ต๋๋ค.(๋ก์ง์ ๋ณด์ ํ๊ธฐ ๋๋ฌธ)
-
<๊ฐ ์ปดํฌ๋ํธ ์ญํ >
- context : ์ ์ญ ๊ฐ์ฒด, state๋ณด์ , ๋ก์ง(ํธ๋ค๋ฌํจ์) ๋ณด์
- ์ต์์ ์ปดํฌ๋ํธ : view์ปดํฌ๋ํธ ๋ ๋๋ง
- view์ปดํฌ๋ํธ : view๋ ๋๋ง, (ํธ๋ค๋ฌํจ์๋ฅผ context์์ ๋ฐ์์ ์ฌ์ฉ)
-
context์ ์ญํ ์ด ์กฐ๊ธ ์ปค์ง๋๋ค.(state๋ณด์ + ๋ก์ง ๋ณด์ )
-
view์ปดํฌ๋ํธ ์์ฒด์ ์ฌ์ฌ์ฉ์ฑ์ ์ฌ๋ผ๊ฐ๋๋ค.(๋ก์ง์ ๋ํ ์์กด์ฑ์ ์ฃผ์ ๋ฐ๋ ๋๋)
-
<๊ฐ ์ปดํฌ๋ํธ ์ญํ >
- reducer : ๋ก์ง ๋ณด์ ํจ์
- context : ์ ์ญ ๊ฐ์ฒด, state, dispatch๋ณด์
- ์ต์์ ์ปดํฌ๋ํธ : view์ปดํฌ๋ํธ ๋ ๋๋ง
- view์ปดํฌ๋ํธ : view๋ ๋๋ง, ์ก์ ํธ๋ฆฌ๊ฑฐ
-
์ปดํฌ๋ํธ์ ์ญํ ์ด ์๊ฒ ๋๋์ด์ง๋๋ค.
-
๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ์ ๊ฐ์ฅ ์ด์ธ๋ฆฌ๋ ์ผ์ด์ค๋ผ๊ณ ์ฌ๊ฒจ์ง๋๋ค.
ํ์์ ๋ฐ๋ผ ์ ์ ํ๊ฒ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๊ฒ ์ง๋ง, ์ผ๋จ reducer๋ฅผ ์ฌ์ฉํ๋ฉด dispatch ๋ฉ์๋๊ฐ ๊ฐ์ ๋๊ณ , view์ปดํฌ๋ํธ์์ ์ก์ ์ ํธ๋ฆฌ๊ฑฐํ๋ ์ผ๊ด๋ ๋ฉ์์ง ํ๋ฆ์ ๊ฐ๊ฒ๋์ด ์ฝ๋๊ฐ ์ ๋๋๋ ํจ๊ณผ๊ฐ ์๋ค๊ณ ๋๊ผ์ต๋๋ค. (dispatch๋ฉ์๋๋ฅผ props๋ก ์ ๋ฌํ๊ณ , ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ view์ปดํฌ๋ํธ์์ ํธ๋ค๋ฌ ํจ์๋ฅผ ์ ์ํ๋ ํจํด์ผ๋ก ์ ๋๋จ)
-
๊ธฐ๋ณธ์ ์ผ๋ก useCallback()๊ณผ React.memo()๋ฅผ ํ์ฉํ์ฌ ์ต์ ํ๋ฅผ ์๋ํ์๋๋ฐ์,
context๋ก ๊ด๋ฆฌ๋๋ ์ํ๋ React.memo()๋ก ์ต์ ํ๋์ง ์์์ ๋ฐฉ๋ฒ์ด ์๋ ๋ง์ด ๊ณ ๋ฏผํ์ต๋๋ค. -
๊ฒฐ๋ก ์ ์ผ๋ก๋ context๋ฅผ ๋ถ๋ฆฌํ์ฌ ์ต์ ํ๊ฐ ๊ฐ๋ฅํ์ต๋๋ค.
-
context์ ํ ์ผ ๋ชฉ๋ก(todos)๊ณผ todos๋ฅผ ๋ณ๊ฒฝํ๋ dispatchํจ์๋ฅผ ๋๊ณ view์ปดํฌ๋ํธ์์ ๋ฐ์์ ์ฌ์ฉํ๊ณ ์์์ต๋๋ค.
-
TodoInput ์ปดํฌ๋ํธ : ์๋ก์ด ํ ์ผ์ ์ ๋ ฅ๋ฐ์์ todos๋ฅผ ๋ณ๊ฒฝํ๊ธฐ ์ํด dispatchํจ์๋ฅผ ๋ฐ์์ ์ฌ์ฉ
TodoList ์ปดํฌ๋ํธ : ํ ์ผ ๋ชฉ๋ก์ ๋ณด์ฌ์ฃผ๊ณ ์ํ๋ฅผ ์ ๋ฐ์ดํธ ํ๊ธฐ ์ํด todos์ dispatch๋ฅผ ๋ฐ์์ ์ฌ์ฉ -
๋ฌธ์ ๋, TodoList์์ ์ํ ์ ๋ฐ์ดํธ๊ฐ ๋ฐ์ํ ๋, TodoInput์ปดํฌ๋ํธ๊ฐ ๋ถํ์ํ๊ฒ ๋ ๋๋ง๋๋ ๊ฒ์ด์์ต๋๋ค.
-
TodoInput์ props๋ก ๋ฐ๋ ์ํ๋ ์์ด context๋ก ๋ถํฐ ๊ฐ์ฒดํํ์ value๋ฅผ ๋ฐ์์ ์ฌ์ฉํ๊ณ ์์๋๋ฐ์,
context๊ฐ ๋ ๋๋ง๋๋ฉด์ ๋งค๋ฒ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ธฐ ๋๋ฌธ์ ๋ ๋๋ง์ด ๋ฐ์ํ๋ค๊ณ ํ๋จํ๊ณ ํ์ํ ๋ถ๋ถ์ '๊ฐ์ฒด'๊ฐ ์๋ '๊ฐ'์ผ๋ก ๋ถ๋ฆฌํ๊ธฐ๋ก ํ์ต๋๋ค.
- ์ฒ์์๋ dispatchํจ์๋ฅผ useCallback์ผ๋ก ๊ฐ์ธ์ ๋ฆฌํดํ์์ต๋๋ค.
ํ์ง๋ง ํ์ธํด๋ณธ ๊ฒฐ๊ณผ useReducer๊ฐ ๋ฆฌํดํ๋ dispatchํจ์๋ ํญ์ ๊ฐ์ ํจ์๋ผ๋ ๊ฒ์ ํ์ธํ๊ณ dispatchํจ์๋ฅผ ๊ทธ๋๋ก context์ value๋ก ์ ๋ฌํ์์ต๋๋ค. - ๊ฒฐ๊ณผ์ ์ผ๋ก ์๋ ํ๋กํ์ผ๋ง ๊ฒฐ๊ณผ์ฒ๋ผ todos ์ํ๊ฐ ๋ณํ๋๋ผ๋ TodoInput์ ๋ ๋๋ง๋์ง ์๋๋ก ์ต์ ํ์ ์ฑ๊ณตํ์ต๋๋ค.
- ์ฒ์์ useMemo๋ฅผ ์ ํ์ ๋๋ ๋จ์ํ useCallback์ ํจ์์ ์ฌ์ฉํ๊ณ useMemo๋ ๊ฐ์ ์ฌ์ฉ๋๋ ๋ฉ๋ชจ์ด์ ์ด์ hooks์ด๋ค! ๋ผ๊ณ ์๊ฐ์ ํ์ต๋๋ค.
- ๊ทธ๋ฐ๋ฐ ๊ฐ์ด ๊ณต๋ถํ๋ ์น๊ตฌ ํ๋๊ฐ useMemo๋ useEffect๋ ๋น์ทํ ๊ฒ ๊ฐ์ง ์์์? ๋ผ๋ ์ง๋ฌธ์ ๋์ก๊ณ useMemo๋ฅผ ์๋ชป ์ดํดํ๋ค๋ ๊ฒ์ ๊นจ๋ฌ์์ต๋๋ค.
๊ทธ ์ฐจ์ด๋ฅผ ์ดํดํ๊ธฐ ์ํด ๊ณต์๋ฌธ์ ๋ฑ ์ฌ๋ฌ ์๋ฃ๋ ์ฐพ์๋ณด๊ณ ์์ ์ฝ๋๋ ๋ง๋ค์ด๋ณด๋ฉด์ ๊ธ์ ํ๋ ์จ๋ดค์ต๋๋ค.(useMemo vs. useEffect) - ๋ hooks์ ๋์์ ์ดํด๋ณด๋ฉด์ useEffect์ ์ฝ๋ฐฑ์ ๋ ๋๋ง ์ดํ์ ์คํ๋๊ณ useMemo์ ์ฝ๋ฐฑ์ ๋ ๋๋ง ๋์ค์ ์คํ๋๋ค๋ ์ , useEffect์ ์ฝ๋ฐฑ์์ state๋ฅผ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ ์ถ๊ฐ์ ์ธ ๋ ๋๋ง์ ๋ฐ์์ํจ๋ค๋ ์ ๋ฑ์ ๋ฐฐ์ ์ต๋๋ค.
๋ฆฌ์กํธ ์ฑ์ ๋ง๋ค๋ฉด์ CRA๋ฅผ ์ฌ์ฉํ์ง ์๊ณ babel๊ณผ webpack์ ์ด์ฉํ์ฌ ๊ฐ๋ฐํ๊ฒฝ ์ค์ ์ ์ง์ ํด๋ณด์์ต๋๋ค.
๊ณต์๋ฌธ์๋ฅผ ์ฐพ์๊ฐ๋ฉด์ configํ์ผ ์์ฑ๋ฒ, ๊ฐ๋ฐ ํธ์์ฑ์ ๋์ฌ์ฃผ๋ ์ฌ๋ฌ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉ๋ฒ ๋ฑ์ ์ตํ์ต๋๋ค.
์ฑ์ ๊ฐ๋ฐํ๋ฉด์ webpack.config๋ฅผ ๊ฐ๋ฐ์ฉ๊ณผ ๋ฐฐํฌ์ฉ 2๊ฐ๋ก ๋๋์ด์ ์ฌ์ฉํ์์ต๋๋ค.
๋ฐฐํฌ์ฉ config๋ splitChunks๋ฅผ ์ ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์บ์๋ฅผ ํ์ฉํ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์๋ํด๋ณด์์ต๋๋ค.
์ํ ๊ด๋ฆฌ์ ํ์ํ hooks ๋ฅผ ๋ค์ํ๊ฒ ์ฌ์ฉํด๋ณด๋ฉด์ ํน์ง์ ๋๊ปด๋ณด์์ต๋๋ค.
์ปค์คํ
hooks๋ ๋ช๊ฐ ๋ง๋ค์ด๋ณด์๋๋ฐ, ๋ก์ง์ hooks๋ก ๋ถ๋ฆฌํ๋ ๊ฑธ ์๊พธ ์๋ํด๋ณด์์ผ๊ฒ ๋ค๋ ์๊ฐ์ด ๋ค์์ต๋๋ค.
๋ฆฌ์กํธ ๋ผ์ฐํฐ์ switch ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ ์ด๊ธฐํ๋ฉด ์ง์
์์ ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ๋ ๋๋ง์ ๋ง๊ธฐ๋ ํ์ต๋๋ค.
๊ทธ๋ฐ๋ฐ chunk๋ฅผ ๋ถ๋ฆฌํด์ ์ปดํฌ๋ํธ ํ์ผ ์์ฒด๋ฅผ ๋์ค์ ๋ฐ๋ ๋ฐฉ๋ฒ์ด ์๋ค๊ณ ํ๋๊ตฐ์!
๊ท๋ชจ๊ฐ ํฐ ์ดํ๋ฆฌ์ผ์ด์
์ ๊ตฌํํ ๋ ๋ณด๋ค ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ๊ผญ ํ์ํ ๊ธฐ๋ฅ์ด๋ผ ์๊ฐ๋์ด ์ถํ์ ์ ์ฉํด๋ณผ ์๊ฐ์
๋๋ค.
์์ํ ๋ ํ๋ก์ ํธ ๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ ์ก์์ผํ๋ ๊ณ ๋ฏผํ๋ ์ค atomic design์ ์ ํ๋๋ฐ์, ๋ฆฌ์กํธ์ ๋ฑ ์๋ง์ง ์์๊น? ์ถ์ด์ ๋๋ฆ ๋ฐ๋ผํด๋ณด๋ ค ํ์ง๋ง ์ ํ๊ฒ๋ง ๋ชปํ๊ฒ ๋์ด๋ฒ๋ฆฐ ๊ฒ ๊ฐ์ต๋๋ค.
๊ตฌ์กฐ ๊ณ ๋ฏผํ๋ค๊ฐ ๊ฐ๋ฐ์ด ๋๋์ง๋ ๊ฒฝํ์ ํ๋๋ฐ์, ๋ค์์๋ ์ฒ์๋ถํฐ ์๋ฒฝํ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๋ คํ์ง ๋ง๊ณ ๋ง๋ค์ด๋๊ฐ๋ฉด์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ถ๋ถ์ ๋ถ๋ฆฌํ๋ ๋ฐฉ์์ผ๋ก ์งํํด๋ณผ ์๊ฐ์
๋๋ค.