์ด์ ๋ ๋ฉ์๋๋ค์ ๋๋ต์ ์ผ๋ก ์ ๋ฆฌํ์์ง๋ง ๋ค์ ํ๋ฒ ์ ๋ฆฌ๋ฅผ ํด๋ณด๋ ค๊ณ ํ๋ค.
์ํ๊ฐ ๊ด๋ฆฌ๋๋ ์ค์ง ํ๋์ ๊ณต๊ฐ์ด๋ค.
createStore() ๋ฉ์๋์ ์ฒซ๋ฒ์งธ ์ธ์๋ ๋ฆฌ๋์์ ์์น์ด๊ณ ๋๋ฒ์งธ ์ธ์๋ก store์ ์ด๊ธฐ๊ฐ์ ๋ฃ์ ์ ์๋ค.
๊ฐ์ฒด ์์ ํ์ ์ด๋ผ๋ ํ๋กํผํฐ ํค๊ฐ ๋ฌด์กฐ๊ฑด ์์ด์ผํ๊ณ , ๊ทธ ๋ค์์ผ๋ก ๋ค๋ฅธ ํค๋ฅผ ๊ฐ์ง ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
ํ์ฌ ์ํ์ Action์ ์ด์ฉํด ๋ค์ ์ํ๋ฅผ ๋ง๋ค์ด ๋ธ๋ค.
Action ๊ฐ์ฒด๊ฐ dispatch์๊ฒ ์ธ์๋ก ์ ๋ฌ๋๊ณ , dispatch๋ Reducer๋ฅผ ํธ์ถํด์ ์๋ก์ด state๋ฅผ ์์ฑํ๋ค.
์ฌ๊ธฐ์ dispathch๋ ์ผ์ข
์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
์ด ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์คํ์ด ๋์์๋ dispatch๊ฐ Reducer๋ฅผ ํธ์ถํด ์ธ์๋ฅผ action ๊ฐ์ฒด๋ฅผ ๋ฆฌ๋์ ์์ผ๋ก ๋์ ธ์ค๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฆฌ๋์๊ฐ ํด๋น action ๊ฐ์ฒด๋ฅผ ๋๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก ๋ฐ์์ ๊ฒฐ๋ก ์ ์ผ๋ก ์ํ๋ฅผ ๋ณ๊ฒฝ์ํจ๋ค.
-> ๋ฐ์ดํฐ๊ฐ ํ ๋ฐฉํฅ์ผ๋ก ํ๋ฌ์ผํ๊ธฐ ๋๋ฌธ.
Presentational | Container | |
---|---|---|
๊ธฐ๋ฅ | ์ด๋ป๊ฒ ๋ณด์ฌ์ง๋๊ฐ? | ์ด๋ป๊ฒ ๋์ํ๋๊ฐ? |
Redux์ ์ฐ๊ด์ฑ | ์์ | ์์ |
Read Data | Props์์ data๋ฅผ ์ฝ์ | Redux์ State์ ์ ๊ทผ(useSelector) |
Change data | props์์ ์ฝ๋ฐฑ์ ํธ์ถ | Redux Action |
ํ๋ ์ ํ ์ด์ ์ปดํฌ๋ํธ๋ ๋ฉ๋ด ์์ ๋ฉ๋ด๋ค์ด๊ณ ์ปจํ ์ด๋๋ ๊ทธ ๋ฉ๋ด๋ค์ ๋ด๊ณ ์๋ ๋ฉ๋ด๋ผ๊ณ ์๊ฐํ๋ฉด ํธํ๋ค.
์ปดํฌ๋ํธ์ ์คํ
์ดํธ๋ฅผ ์ฐ๊ฒฐํด์ฃผ๋ ํ
์ด๋ค.
๋์คํจ์น๋ฅผ ์ฌ์ฉํด์ผํ๋ ์ปดํฌ๋ํธ์์ ๋์คํจ์น๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ ์ฌ์ฉํด์ฃผ๋ ๊ฒ์ผ๋ก ์ปดํฌ๋ํธ์ ์คํ
์ดํธ๋ฅผ ์ฐ๊ฒฐํด์ค๋ค.
import {useSelector} from 'react-redux';
const state = useSelector(state => state.Reducer)
์ก์ ๊ฐ์ฒด๋ฅผ ๋ฆฌ๋์์ ์ ๋ฌํด์ฃผ๋ ์ญํ ์ ํ๋ ํ ์ด๋ค.
import { useSelector, useDispatch } from 'react-redux'
const state = useSelector(state=> state.Reducer)
const dispatch = useDispatch();
dispatch((e)=>{type: 'ADD', payload: {key: e}})
์ด๋ฐ ์์ผ๋ก ์ฌ์ฉํ๋ค.
์ค๋ ๋ฆฌ๋์ค๋ฅผ ๋ค์ ๊ณต๋ถํด๋ดค๋ค.
๋ฆฌ๋์ค ํ
์ ์ฒ์๋ดค์๋ dispatch?? ์คํ ์ด๋ ์ด๋์ ๋ถํ๊ฑฐ์ง? ์ด๋ ๊ฒ ์ด๋ฆฌ๋ฒ๋ฆฌํ์๋๋ฐ
์กฐ๊ธ ์ต์ํด์ง๋๊น ์ด ๋ฐฉ๋ฒ ๋ฐ์ ๋ชป์ธ ๊ฒ ๊ฐ๋ค.
๋ฆฌ๋์ค๋ ์ฌ๋ฐ์ด์ ๋ฐฐ์ฐ๋ ๋ง์ด ์๋ค!
๋ฌ๊ธ ์์ง๋ง ํ์ด์ฌ๋ ๊ธฐ๋๋๋ค!!
์ค๋๋ ์ ๋ณด๊ณ ๊ฐ์~^ใ ก^~