๐ ๋ฆฌ๋์ค ๋ง๋ณด๊ธฐ
๋ฆฌ๋์ค์์ ์ค์ํ ๊ฐ๋ ์ ๋ค์์ ์ฌ์ฏ๊ฐ์ง๋ค.
- ์ก์
- ์ก์ ์์ฑ ํจ์
- ๋ฆฌ๋์
- ๊ตฌ๋
- ๋์คํจ์น
- ๋ถ๋ณ์ฑ ์ ์ง
1. ์ก์
์ํ์ ์ด๋ค ๋ณํ๊ฐ ํ์ํ๋ฉด ์ก์ ์ ์ผ์ผ์ผ์ผ ํ๋ค.
์ก์
์ ํ๋์ ๊ฐ์ฒด์ธ๋ฐ, ํ์ ํ๋๋ type
์ด๋ค.
{
type: TOGGLE_VALUE;
}
์ด์ธ ํ๋๋ ํ์ํ๋ค๋ฉด ์ถ๊ฐํ ์ ์๋ค.
{
type: INCREASE, difference;
}
์ฐธ๊ณ ๋ก, ์ก์ ์ ์ด๋ฆ์ ๋ฌธ์์ด์ด ์๋ ๋ณ์๋ก ๊ด๋ฆฌํ๋ค.
const TOGGLE_SWITCH = 'TOGGLE_SWITCH';
2. ์ก์ ์์ฑ ํจ์
์ก์
์์ฑ ํจ์๋ ์ก์
๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ฃผ๋ ํจ์๋ค.
๋์คํจ์น๋ฅผ ํตํด ์ก์
์ ์ผ์ผํฌ ๋, ์ด ์ก์
์์ฑ ํจ์๋ฅผ ํธ์ถํด์ฃผ์ด์ผ ํ๋ค.
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
3. ๋ฆฌ๋์
๋ฆฌ๋์๋ ๋ณํ๋ฅผ ์ผ์ผํค๋ ํจ์๋ค.
์ก์
์ ๋ฐ์์ํค๋ฉด ๋ฆฌ๋์๊ฐ ํ์ฌ ์ํ
์ ์ ๋ฌ๋ฐ์ ์ก์
๊ฐ์ฒด
๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ์์จ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ ๊ฐ์ ์ฐธ๊ณ ํ์ฌ ๋ฏธ๋ฆฌ ์ ์ํ ๋ก์ง์ ํตํด ์๋ก์ด ์ํ๋ฅผ ๋ง๋ค์ด ๋ฐํํ๋ค.
๋ฆฌ๋์๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ ๋๊ฐ์ง๊ฐ ํ์ํ๋ค.
- ์ก์ ์ด๋ฆ
- ์ด๊ธฐ ์ํ๊ฐ
// ์ด๊น๊ฐ ์ค์
const initialState = {
toggle: false,
};
function reducer(state = initialState, action) {
switch (action.type) {
case TOGGLE_SWITCH:
return {
...state, // ๋ถ๋ณ์ฑ ์ ์ง
toggle: !state.toggle, // ์๋ก์ด ๊ฐ์ผ๋ก ๋ฎ์ด์ฐ๊ธฐ
};
}
}
๋ฆฌ๋์๋ฅผ ์ ์ํ๋ค๋ฉด ๋๋์ด store
๋ฅผ ๋ง๋ค ์ ์๋ค.
const store = createStore(reducer);
4. ๊ตฌ๋
์ํ๊ฐ ์ ๋ฐ์ดํธ๋ ๋๋ง๋ค ์ด๋ค ํจ์๋ฅผ ์คํ์์ผ์ฃผ๊ณ ์ถ๋ค๋ฉด (์: render) ๊ตฌ๋ ์ ์ด์ฉํ๋ฉด ๋๋ค.
const render = () => console.log('์ํ๊ฐ ์
๋ฐ์ดํธ๋จ');
const unsubscribe = store.subscribe(render);
unsubscribe
๋ผ๊ณ ๋ค์ด๋ฐํด์ฃผ๋ ์ด์ ๋ ์ถํ ๊ตฌ๋
์ ๋นํ์ฑํํ ๋ ํด๋น ํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํจ์ด๋ค.
5. ๋์คํจ์น
์ก์
์ ๋ฐ์์ํค๋ ํจ์๋ฅผ ๋์คํจ์น๋ผ๊ณ ํ๋ค.
ํ๋ผ๋ฏธํฐ์ ์ก์
๊ฐ์ฒด๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
$divToggle.onclick = () => store.dispatch(toggleSwitch());
6. ๋ถ๋ณ์ฑ ์ ์ง
๋ฆฌ๋์๋ฅผ ์ฌ์ฉํ์ฌ ์ํ๋ฅผ ์
๋ฐ์ดํธํ ๋๋, ๊ธฐ์กด ์ํ์ ๋ถ๋ณ์ฑ์ ์ ์งํด์ฃผ์ด์ผ ํ๋ค.
๊ธฐ์กด ์ํ๊ฐ์ ์์ ํ๋ ๊ฒ์ด ์๋๋ผ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด ๋ฎ์ด์์์ฃผ์ด์ผ ํ๋ค๋ ๋ป์ด๋ค.
์ด์ ๋, ๋ฆฌ๋์ค๊ฐ ์ํ ์ ๋ฐ์ดํธ ์ฌ๋ถ๋ฅผ ํ์ธํ ๋ ์ฑ๋ฅ ์ ์ง๋ฅผ ์ํด ์์ ๋น๊ต๋ฅผ ์ํํ๊ธฐ ๋๋ฌธ์ด๋ค.
๊ธฐ์กด ์ํ๊ฐ์ ์์ ํ๊ฒ ๋๋ฉด ๊ฐ์ฒด์ ํน์ฑ์ ๋์ผํ ์ฃผ์๋ฅผ ๊ฐ๊ธฐ ๋๋ฌธ์ ๋ฆฌ๋์ค๋ ์ํ๊ฐ ์ ์ง๋ ๊ฒ์ผ๋ก ๋ณธ๋ค.
๋ฐ๋ฉด ์๋ก์ด ๊ฐ์ฒด๋ก ์์ ๋ฎ์ด์ฐ๊ฒ ๋๋ฉด ๊ธฐ์กด ์ํ๊ฐ๊ณผ๋ ๋ณ๊ฐ์ ๊ฐ์ฒด์ด๋ฏ๋ก ๋ค๋ฅธ ์ฃผ์๋ฅผ ๊ฐ๊ฒ ๋์ด ๋ฆฌ๋์ค๊ฐ ์
๋ฐ์ดํธ๋ฅผ ์ธ์งํ๊ฒ ๋๋ค.
์ด๋ ์ด์ ์ํ๊ฐ์ ๋ณต์ฌํ๊ธฐ ์ํด ์คํ๋ ๋ ์ฐ์ฐ์๋ฅผ ์ฃผ๋ก ์ด์ฉํ๋๋ฐ,
์คํ๋ ๋ ์ฐ์ฐ์๋ depth 1
๊น์ง๋ง ๊น์ ๋ณต์ฌ๋ฅผ ์ํํ๊ธฐ ๋๋ฌธ์ ๊ฐ์ฒด๊ฐ ๋ณต์กํ ๊ฒฝ์ฐ ์ ์ ์น ์๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํธํ๊ฒ ๋ค๋ฃจ๊ธฐ ์ํด immer
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ๋ค๊ณ ํ๋ค.
๋ฆฌ๋์ค์ ์ธ๊ฐ์ง ๊ท์น
1. ๋จ์ผ ์คํ ์ด
ํ๋์ ์ ํ๋ฆฌ์ผ์ด์
์์๋ ํ๋์ ์คํ ์ด๋ง ์กด์ฌํด์ผ ํ๋ค.
์ฌ๋ฌ๊ฐ์ ์คํ ์ด๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ถ๊ฐ๋ฅํ๊ฑด ์๋์ง๋ง, ๊ถ์ฅํ์ง ์๋๋ค.
2. ์ฝ๊ธฐ ์ ์ฉ ์ํ
๋ฆฌ๋์ค ์ํ๋ ์ฝ๊ธฐ ์ ์ฉ์ด๋ค.
์ฆ, ๊ฐ ์ํ์ ๋ถ๋ณ์ฑ์ ์ ์งํด์ฃผ์ด์ผ ํ๋ค๋ ๋ง์ด๋ค.
์ด์ ๋ ์๊ธฐํ ๊ฒ์ฒ๋ผ, ์ฑ๋ฅ์ ์ ์งํ๊ธฐ ์ํด ์์ ๋น๊ต๋ฅผ ํตํด ์ํ ์
๋ฐ์ดํธ๋ฅผ ํ๋จํ๊ธฐ ๋๋ฌธ์ด๋ค.
3. ๋ฆฌ๋์๋ ์์ํ ํจ์
๋ณํ๋ฅผ ์ผ์ผํค๋ ๋ฆฌ๋์ ํจ์๋ ์์ํ ํจ์์ฌ์ผ ํ๋ค.
์์ํ ํจ์๋ ๋ค์์ ์กฐ๊ฑด์ ๋ง์กฑํ๋ค.
- ๋ฆฌ๋์ ํจ์๋ ์ด์ ์ํ์ ์ก์ ๊ฐ์ฒด๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ๋๋ค.
- ํ๋ผ๋ฏธํฐ ์ธ์ ๊ฐ์๋ ์์กดํ๋ฉด ์๋๋ค.
- ์ด์ ์ํ๋ ์ ๋๋ก ๊ฑด๋๋ฆฌ์ง ์๊ณ , ๋ณํ๋ฅผ ์ค ์๋ก์ด ์ํ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ ๋ฐํํ๋ค.
- ๋๊ฐ์ ํ๋ผ๋ฏธํฐ๋ก ํธ์ถ๋ ๋ฆฌ๋์ ํจ์๋ ์ธ์ ๋ ๋๊ฐ์ ๊ฒฐ๊ณผ๊ฐ์ ๋ฐํํด์ผ ํ๋ค.
๋ฆฌ๋์ ํจ์ ๋ด๋ถ์์ ๋๋ค๊ฐ์ ๋ง๋ค๊ฑฐ๋, Date ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฌ ์๊ฐ์ ๊ฐ์ ธ์ค๊ฑฐ๋, ๋คํธ์ํฌ ์์ฒญ์ ํด์๋ ์๋๋ค.
์ด๋ฌํ ์์
์ ๋ฆฌ๋์ ๋ฐ๊นฅ์์ ์ฒ๋ฆฌํ๊ฑฐ๋, ๋ฆฌ๋์ค ๋ฏธ๋ค์จ์ด์์ ์ฒ๋ฆฌํ๋ค.
์ฃผ๋ก ๋คํธ์ํฌ ์์ฒญ๊ณผ ๊ฐ์ ๋น๋๊ธฐ ์์
์ ๋ฏธ๋ค์จ์ด๋ฅผ ํตํด ๊ด๋ฆฌํ๋ค.