action, store ๋ฑ์ ๋ํ ๊ฐ๋ ์ ๋ค์ํ ๊ด์ ์์ ์ ๋ฆฌ
๋ฑ์ฅ ๋ฐฐ๊ฒฝ
๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฐ์ดํฐ ํ๋ฆ์ ์ผ๊ด์ฑ์๊ฒ ๊ด๋ฆฌํจ์ผ๋ก์จ ์์ธก ๊ฐ๋ฅ์ฑ์ ๋์ด๊ธฐ ์ํจ
๊ธฐ์กด์ MVC ํจํด ์ฌ์ฉ..
โ ๋ฌธ์ ์ ๋ฑ์ฅ
- Model์ ๋ฐ์ดํฐ ์ ์ฅํ๊ณ Controller๋ฅผ ์ด์ฉํด Model์ ๋ฐ์ดํฐ ๊ด๋ฆฌ
- ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ท๋ชจ๊ฐ ์ปค์ง๋ฉด ๋ณต์กํ ๋ฐ์ดํฐ ํ๋ฆ์ ๊ฐ์ง๊ฒ ๋
์๋ฌ๋๋ฐ..
์๋ ๊ฒ ๋๋ฒ๋ฆผ
flux ํจํด?
์ฌ์ฉ์ ์ ๋ ฅ์ ๊ธฐ๋ฐ์ผ๋ก action์ ๋ง๋ค๊ณ action์ dispatcher์ ์ ๋ฌํด store์ ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํ ํ view์ ๋ฐ์ํ๋ ๋จ๋ฐฉํฅ ํ๋ฆ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ์ํคํ ์ฒ
-
action: ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํ๋ ํ์๋ก์ dispatcher์๊ฒ ์ ๋ฌ๋๋ ๊ฐ์ฒด
-
action creator: ์๋ก ๋ฐ์ํ action์ ํ์ ๊ณผ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๋ฌถ์ด dispatcher์๊ฒ ์ ๋ฌ
{ type: 'SET_PROFILE' data: { 'name': 'Harry', 'age': '11' } }
-
dispatcher: ๋ชจ๋ ๋ฐ์ดํฐ์ ํ๋ฆ์ ๊ด๋ฆฌํ๋ ์ค์ ํ๋ธ
-
store(model): ์ํ ์ ์ฅ์๋ก์ ์ํ์ ์ํ๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ ๋ฉ์๋๋ฅผ ๊ฐ์ง
-
view: ๋ฆฌ์กํธ ์ปดํฌ๋ํธ
-
action โ dispatcher โ model โ view โ action โ dispatcher โฆ (์ํ๊ตฌ์กฐ)
JavaScript ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โ Redux์ ๋ณธ์ง์ Node.js
โ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๋ถ๋ฆฌํ๋ ํจํด์ ์จ์ ์ํ ๊ด๋ฆฌ๋ฅผ ํธํ๊ฒ ๋์์ฃผ๋ ๋๊ตฌ
โ flux ํจํด์์ ์๊ฐ์ ๋ฐ์ ๋ ๋จ์ํํ๊ณ ๊ตฌ์กฐํ๋ ํํ๋ก ๋ฐ์
- ๋ณต์ก์ฑ ์ค์
- ๋จ์ผ store๊ณผ reducer ๊ฐ๋ ๋์
- ์ํ๊ด๋ฆฌ๋ฅผ ๋ ๋จ์ํํ๊ณ ๋๋ฒ๊น ๊ณผ ์ ์ง๋ณด์ ๋ ์ฝ๊ฒ ๋ง๋ฆ
Single source of truth
- ๋์ผํ ๋ฐ์ดํฐ๋ ํญ์ ๊ฐ์ ๊ณณ์์ ๊ฐ์ง๊ณ ์ด
- ์คํ ์ด๋ผ๋ ํ๋๋ฟ์ธ ๋ฐ์ดํฐ ๊ณต๊ฐ์ด ์๋ค๋ ์๋ฏธ
*์คํ ์ด: ์ํ๊ฐ ๊ด๋ฆฌ๋๋ ์ค์ง ํ๋์ ๊ณต๊ฐ
State is read-only
- ๋ฆฌ์กํธ์์ setState ๋ฉ์๋๋ฅผ ํ์ฉํด์ผ๋ง ์ํ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅ
- ๋ฆฌ๋์ค์๋ ์ก์ ์ด๋ผ๋ ๊ฐ์ฒด๋ฅผ ํตํด์๋ง ์ํ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅ
*์ก์ : ์ฑ์์ ์คํ ์ด์ ์ด๋ฐํ ๋ฐ์ดํฐ
Changes are made with pure functions
- ๋ณ๊ฒฝ์ ์์ ํจ์๋ก๋ง ๊ฐ๋ฅ
- ๋ฆฌ๋์์ ์ฐ๊ด๋๋ ๊ฐ๋
- store - action - reducer
*๋ฆฌ๋์: ์ก์ ์ ์คํ ์ด์ ๋ฐ๋ก ์ ๋ฌํ๋ ๊ฒ์ด ์๋ ์ก์ ์ ๋ฆฌ๋์์ ์ ๋ฌํด์ผํจ
*๋ฆฌ๋์๊ฐ ์ฃผ๋ฌธ์ ๋ณด๊ณ ์คํ ์ด์ ์ํ ์ ๋ฐ์ดํธ
โก๏ธAction โ Dispatch โ Reducer โ Store
Action
- state๋ฅผ ๋ฐ๊พธ๋ ๋ฐฉ์
- ์ก์ ๊ฐ์ฒด๋ฅผ ๊ฐ์ง
- ๋ฐ๋์ type ํ๋ ํ์
Dispatch
- action์ ๋ฐ์์ํค๋ ๊ฒ
- action ๊ฐ์ฒด๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ์
Reducer
- ๋ณํ๋ฅผ ์ผ์ผํค๋ ํจ์
- action์ ๊ฒฐ๊ณผ๋ก state๋ฅผ ์ด๋ค์์ผ๋ก ๋ฐ๊ฟ์ง ๊ตฌ์ฒด์ ์ผ๋ก ์ ์
Store
- ํ๋ก์ ํธ์ ๋ฆฌ๋์ค๋ฅผ ์ ์ฉํ๊ธฐ ์ํด ํ์ํ ๊ฒ
- ํ๋ก์ ํธ์ ๋จ ํ๊ฐ์ stroe๋ง ๊ฐ์ง
- ์ํ์ ์ค์์ ์ฅ์๋ผ๊ณ ํ ์ ์์
- reducer, dispatch ๋ฑ์ด ์คํ ์ด์ ๋ด์ฅํจ์๋ก ํฌํจ๋์ด์์
- ์ํ ๋ณ๊ฒฝ๋์ด์ผ ํ๋ ์ด๋ฒคํธ ๋ฐ์์ ๋ณ๊ฒฝ๋ ์ํ์ ๋ํ ์ ๋ณด๊ฐ ๋ด๊ธด action ๊ฐ์ฒด ์์ฑ
- ์ด action ๊ฐ์ฒด๋ dispatch ํจ์์ ์ธ์๋ก ์ ๋ฌ
- dispatch ํจ์๋ action ๊ฐ์ฒด๋ฅผ reducer ํจ์๋ก ์ ๋ฌ
- reducer ํจ์๋ action ๊ฐ์ฒด์ ๊ฐ ํ์ธ ํ ๊ทธ ๊ฐ์ ๋ฐ๋ผ ์ ์ญ ์ํ ์ ์ฅ์ store ์ํ ๋ณ๊ฒฝ
- ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด react๋ ํ๋ฉด ์ฌ๋ ๋๋ง
- ์์ ํจ์๋ฅผ ์ฌ์ฉํด ์ํ๋ฅผ ์์ธก ๊ฐ๋ฅํ๊ฒ ๋ง๋ฆ
- ์ ์ง๋ณด์์ ์ฉ์ด
- redux dev tool์ด ์์ด ๋๋ฒ๊น ์ ์ ๋ฆฌ
- ๋น๋๊ธฐ๋ฅผ ์ง์ํ๋ Redux Saga, Redux Thunk ๋ฑ ๋ค์ํ ๋ฏธ๋ค์จ์ด๊ฐ ์กด์ฌ
- ์ก์ ์ ๋ฐ๋ฅธ ๋ชจ๋ ๋ณ๊ฒฝ ์ถ์ ๊ฐ๋ฅ
- ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฐ์ฅ ์งง๊ฑฐ๋ ๋น ๋ฅธ ๋ฐฉ๋ฒ์ ์๋
- ๋ฐฐ์์ผ ํ ๊ฐ๋ ๊ณผ ์์ฑํด์ผ ํ ์ฝ๋๊ฐ ๋ง์
- ๋ฆฌ๋์ค๋ฅผ ์ ์ฉํ๊ฒ ์ฌ์ฉํ๋ ค๋ฉด ๋ง์ ํจํค์ง ์ถ๊ฐํด์ผํจ
- ๋ฏธ๋ค์จ์ด
- ๋ฏธ๋ค์จ์ด๋ฅผ ํตํด ๋น๋๊ธฐ ์์ ์ ๋ํ ์ข ๋ ๋ํ ์ผํ๊ณ ํธํ ์ปจํธ๋กค ๊ฐ๋ฅ
- ex: Redux-saga
- ์์ฒญ์ ์ฐ๋ฌ์ ์ฌ๋ฌ๋ฒ ํ๊ฒ ๋ ๋ ์ด์ ์์ฒญ์ ๋ฌด์ํ๊ณ ๋ง์ง๋ง ์์ฒญ๋ง ์ฒ๋ฆฌํ๊ณ ์ถ์ ๋
- ํน์ ์กฐ๊ฑด์ด ๋ง์กฑ๋์ ๋ ์ด์ ์ ์์ํ ์์ฒญ์ ์ทจ์ํ๋ ์ํฉ
- ์ปดํฌ๋ํธ ๋ฐ์์ ์ด๋ค ์์ ์ ์ํํ ๋
- ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง
- api ์์ฒญ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฉํด ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ํ ๋ ์ ์ฉ (๋ฏธ๋ค์จ์ด๊ฐ ์ ์ฉ)
- ํ
์คํ
์ด ์ฉ์ด
- ๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ ์ฑ์ ํ ์คํธ ํ๊ธฐ๊ฐ ๋น๊ต์ ์ฌ์
์ฅ๋จ์
Recoil
์ฅ์
- ์ง๊ด์ ์ด๋ฉด์ ๊ฐ๋จํ ๊ตฌ์กฐ
- ์ฝ๋์ ์์ด ๋งค์ฐ ์ค์ด๋ค๊ฒ ๋
๋จ์
- redux๋ ์์ ์ ์ธ devtool์
๊ฒฐ๋ก
- ๋๋ฒ๊น ์ ์ธก๋ฉด์์ ๋ณด๋ฉด ๋ฆฌ๋์ค๊ฐ ์ ๋ฆฌ
Redux
์ฅ์
- ๊ฒ์ฆ๋ ์ ๋ขฐ์ฑ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- redux devtools๋ก ์ง๊ด์ ์ผ๋ก ๋ณผ ์ ์๋ ๋ฐฉ๋ฒ ์ ๊ณต
- ์ํ๊ฐ์ด ๋ง์์ง ๊ฒฝ์ฐ ๋๋ฒ๊น ์ด ์๋์ ์ผ๋ก recoil์ ๋นํด ํธํด์ง ๊ฒ
๋จ์
- ์์ ์ํ ํ๋๋ฅผ ๋ณ๊ฒฝํ๋ ค๊ณ ํด๋ ๋ณด์ผ๋ฌ ํ๋ ์ดํธ ์ฝ๋๋ฅผ ๋ง์ด ์์ฑํด์ผํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์์
๊ฒฐ๋ก
- Recoil์ ๋นํด ์๋์ ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ ์ ๋ง์์ง
๋น๋๊ธฐ ์ฒ๋ฆฌ
Recoil
- Selector๋ฅผ ์ฌ์ฉ
- Selector๋ recoil์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํด ์ฌ์ฉํ๋ฉฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ ์บ์ฑ
- ๊ฐ์ ์๋ต์ ๋ณด๋ด๋ api call์ ์ถ๊ฐ์ ์ผ๋ก ์์ฒญํ์ง ์์ ์ฑ๋ฅ์ ์ผ๋ก ์ ๋ฆฌ
- redux์ฒ๋ผ ๋ฐ๋ก ๋ฏธ๋ค์จ์ด ์ค์นํ ํ์ x
Redux
- redux-thunk, redux-saga, redux-toolkit ๊ฐ์ ๋ฏธ๋ค์จ์ด๋ ๊ฒ์ฆ๋ ๋ฏธ๋ค์จ์ด๋ผ ์ ๋ขฐ์ฑ์ด ๋์
- redux-saga๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๋๋ ์ดํฐ์ ์ดํํธ ๋ฑ์ ์ดํด ํ์
- ๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ๋ ๋ฌ๋์ปค๋ธ๊ฐ ์๊น
Redux๋ Context API๋ฅผ ๊ฐ์ง๊ณ ๋ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โ ์ ์ญ ์ํ ๊ด๋ฆฌ ์ธก๋ฉด์์ ์ฐจ์ด์ ์ด ๊ฑฐ์ ์์
โ Redux๋ Context API์ ๋ค๋ฅด๊ฒ ์ ์ญ ์ํ ๊ด๋ฆฌ ์ธ์ ๋ค์ํ ๊ธฐ๋ฅ ์ ๊ณต
๐ก์ค์ง ์ ์ญ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ๋ค๋ฉด Context Api
์ํ ๊ด๋ฆฌ ์ธ์ ์ฌ๋ฌ ๊ธฐ๋ฅ์ด ํ์ํ๋ค๋ฉด Redux