(*
์์ํจ์: ๋์ผํ ์ธํ=>๋์ผํ ์์ํ, ๋งค๋ฒ ๋ค๋ฅธ ๊ฐ์ ๋ถ๋ฌ์ผ์ผํค๋ new Date(), fetch(), Math.Random()
๊ณผ ๊ฐ์ ํจ์๋ ๋ฆฌ๋์์์ ์ฌ์ฉํ๋ฉด ์๋๊ณ , ๋ฆฌ๋์ ์ธ๋ถ์ ํ ๋ณ์์ ์์กดํ์ง ์๋๋ก ํ๋ค. ์ค๋ก์ง state์ action๋ง ๊ฐ์ ธ์ ์์ ํ ์ ์๋๋ก~!
๋ง์ฝ, ์์ ๊ฐ์ ๋ณ์๋ ๋ฉ์๋ํธ์ถ์ด ํ์ํ ์ํฉ์ด๋ผ๋ฉด ์ปดํฌ๋ํธ ๋จ์์ ์ ์ฉ์ํค๊ฑฐ๋ ๋ฏธ๋ค์จ์ด๋ฅผ ์ฌ์ฉํ๋ค.)
from 'redux'
createStore
: ํ๋์ store๋ฅผ ์์ฑ, ๋ฆฌ๋์๋ฅผ ์ธ์๋ก ๋ฐ๋๋ค.
combineReducers
: ์ฌ๋ฌ ์ํ๋ฅผ ํ๋์ store ๊ฐ์ฒด๋ก ๋ง๋ค์ด ์ค๋ค.
from 'react-redux'
Provider
: store๋ฅผ ์ ์ญ์์ ์ฌ์ฉํ ์ ์๋๋ก ๊ฐ์ฅ ์ํธ๋ฆฌํฌ์ธํธ๋ฅผ <Provider store={store}><App/></Provider>
๊ณผ ๊ฐ์ด ๊ฐ์ธ์ค๋ค. prop์ผ๋ก store๋ฅผ ๋ด๋ ค์ค๋ค.
useSelector
: store์ ์ํ๊ฐ์ ๋ถ๋ฌ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
useDispatch
: dispatch ํจ์๋ฅผ ๋ฐ๋ก ์ฌ์ฉํ ์ ์๋ค. action์ ์ธ์๋ก ๋ฐ๊ณ , action์ด ๋ฐ์ํ ๋ dispatch๊ฐ ์คํ๋๋ค.
shallowEqual
: selectorํจ์๋ฅผ ์ต์ ํ ์ํจ๋ค. useMemo์ ๋น์ทํ๋ค. (prevState์ nextState๋ฅผ ๋น๊ตํ์ฌ ์ฐจ์ด๊ฐ ์๋์ง๋ฅผ ํ์ธํ๋ ํจ์์ด๊ณ , ์ฐจ์ด๊ฐ ์๊ฒผ์ ๊ฒฝ์ฐ์๋ง ๋ ๋๋ง์ ํ์ฉํ๋ค.)
:์ํ๊ด๋ฆฌ ๋ฐ ์์ธก์ ์ ์ฉํ๋ค.
๋ฆฌ๋์ค๋ฅผ ํ์ตํ๋ฉฐ ๊ฐ๋จํ๊ฒ ์นด์ดํฐ, ํฌ๋๋ฆฌ์คํธ, ๋ชจ๋ฌ์ ๊ตฌํํด๋ดค๋๋ฐ,
๊ธฐ๋ณธ์ ์ผ๋ก๋ ๋ทฐ์ ์ํ๊ด๋ฆฌ๋ฅผ ๋ถ๋ฆฌ์ํค๋ฉด์, ์ํ๊ด๋ฆฌ์ ๊ตฌ์กฐ๊ฐ ์ด๋ป๊ฒ ๋๋์ง์ ๋ฐ๋ผ ๊ตฌ๋ถํด๋ณผ ์ ์์๋ค.
export ์ก์
์์ฑํจ์
, export default Function_Reducer
src
โ components
โ Modal.js //view์ ํด๋นํ๋ ์ปดํฌ๋ํธ ๋ชจ์
โ container
โ ModalContainer.js
//selector, dispatch๋ฅผ ์์ฑํด ์ปดํฌ๋ํธ์ ์ ๋ฌํ๋ ์ปจํ
์ด๋ ์ญํ
โ modules
โ modal.js //action, reducer๋ฅผ ์ ์ฅํ ๊ณณ
โ app
src
โ components
โ Modal.js
//view์ ํด๋นํ๋ ์ปดํฌ๋ํธ
โ store
โ actions
โ modals.js //action ์์ฑ์ ํจ์
โ modalsTypes.js //action type ์ ์
โ reducers
โ modals.js //reducer์ ์ฅ
โ app
component์์ ์ฌ์ฉํ dispatchํจ์ ๋ฐ ํ์ํ ์ํ๋ฅผ selector๋ก ์ง์ ๊ฐ์ ธ๋ค ์ฌ์ฉํ ์๋ ์๊ณ ์ฒซ๋ฒ์งธ ํด๋ ๊ตฌ์กฐ์์ ์ฒ๋ผ container๋ฅผ ๋๊ณ ์์ ์ปดํฌ๋ํธ์ prop์ผ๋ก ์ ๋ฌํ๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ๊ฐ๋ฅํ ๋ฏํ๋ค.
์์ง ๋ฆฌ๋์ค๊ฐ ์ต์ํ์ง ์์ ์ ์ฅ์์๋ ํ ํ์ผ์ ๋ชจ๋ ์ํ์ ๊ด๋ จ ํจ์๋ฅผ ๋ชจ์๋์ ํจํด์ด ๋ ๋ณด๊ธฐ ์ข๋ค๋ ์๊ฐ์ด ๋ ๋ค. ์์ ๊ท๋ชจ๊ฐ ์ ์ ์ปค์ง๋ฉด ๋๋ฒ์งธ๊ตฌ์กฐ์ฒ๋ผ ์ก์ ๊ณผ ๋ฆฌ๋์๋ฅผ ๋ถ๋ฆฌํ ๊ตฌ์กฐ๊ฐ ํธ๋ฆฌํ ์๋ ์๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค.
๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ, Flux Pattern์ ํด๋น๋๋ค.
์ก์
-> ๋ฏธ๋ค์จ์ด -> ๋ฆฌ๋์ ->์คํ ์ด-> ๋ทฐ ์ปดํฌ๋ํธ ์
๋ฐ์ดํธ
์ฃผ๋ก ๋น๋๊ธฐ ์์ฒญ ์์ ์ฌ์ฉ๋๋ค.(redux-thunk
, redux-saga
์ฃผ๋ก ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ)
action์ด dispatch๋๋ค๊ฐ ํน์ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ dispatchํจ์ ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธํจ์๋ฅผ ์คํํ๋ ๋ฑ ์ฌ๋ฌ ๊ตฌ์ฒด์ ์ธ ์ํฉ์ ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค.
Redux-saga : Generator์ ๊ธฐ๋ฐํ ๋ฏธ๋ค์จ์ด
Generator:
ํจ์์ ํ๋ฆ์ yield
์ ํตํด ํน์ ๊ตฌ๊ฐ์ ๋ฉ์ถฐ๋์๋ค๊ฐ next()
๋ก ๋ค์ ํจ์๋ฅผ ์คํ์ํฌ ์ ์์ผ๋ฉฐ, ๊ฒฐ๊ณผ๊ฐ์ ์ฌ๋ฌ๋ฒ ๋ด๋ณด๋ผ ์ ์๋ค.