๐ถ It's time to study Redux, MobX, RxJS
์ํ ๊ด๋ฆฌ์ ๊ธฐ์ด๋ฅผ ๊ณต๋ถํฉ๋๋ค.
์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ฌด์กฐ๊ฑด ํ์ํ ๊ฒ์ ์๋๋ค. ํ์ง๋ง ๊ท๋ชจ๊ฐ ํฐ ์ฑ์์๋ ์๋ ๊ฒ์ด ํธํฉ๋๋ค.
๊ธ๋ก๋ฒ ์ํ ๊ด๋ฆฌ๋, ์ปดํฌ๋ํธ ๊ฐ์ ๋ฐ์ดํฐ ๊ต๋ฅ ํนํ ๋ถ๋ชจ ์์ ๊ด๊ณ๊ฐ ์๋ ์ปดํฌ๋ํธ๋ผ๋ฆฌ์ ๋ฐ์ดํฐ ๊ต๋ฅ๋ฅผ ํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ชจ๋ฅด๊ณ ์ใ ์ฐ๋ ๊ฒ๊ณผ ์๊ณ ์์ฐ๋ ๊ฒ์ ๋งค์ฐ ๋ค๋ฆ ๋๋ค. ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผํ๋ ์ด์
๋ฆฌ๋์ค๋ฅผ ์ด์ํ์ฌ ์ฌ์ด ๊ธ๋ก๋ฒ ์ํ ๊ด๋ฆฌ๋ฅผ ํ ์ ์๊ณ , ์ฒด๊ณ์ ์ด๊ณ ํธ๋ฆฌํ ์ํ ๊ด๋ฆฌ๋ฅผ ํ ์ ์๋ค.
์ํ์ ์ด๋ค ๋ณํ๊ฐ ํ์ํ๊ฒ ๋ ๋, ์ก์ ์ ๋ฐ์์ํจ๋ค. ํ๋์ ๊ฐ์ฒด๋ก ํํ๋๋ฉฐ ๋ค์๊ณผ ๊ฐ์ ํ์์ผ๋ก ์ด๋ฃจ์ด์ ธ์๋ค.
{
type: "TOGGLE_VALUE";
}
type
ํ๋๋ฅผ ํ์์ ์ผ๋ก ๊ฐ์ง๊ณ ์์ด์ผํ๊ณ , ๊ทธ ์ธ์ ๊ฐ๋ค์ ๊ฐ๋ฐ์ ๋ง์๋๋ก ๋ฃ์ด์ค ์ ์๋ค.
{
type: "ADD_TODO",
data: {
id: 0,
text: "๋ฆฌ๋์ค ๋ฐฐ์ฐ๊ธฐ"
}
}
{
type: "CHANGE_INPUT",
text: "์ใด"
}
์ก์ ์์ฑํจ์๋ ์ก์ ์ ๋ง๋๋ ํจ์, ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ์์์ ์ก์ ๊ฐ์ฒด ํํ๋ก ๋ง๋ค์ด์ค๋ค.
function addTodo(data){
return{
type: "ADD_TODO",
data
}
}
// arrow function๋ ๊ฐ๋ฅํ๋ค.
const changeInput = text => ({
type: "CHANGE_INPUT",
text
})
๋ฆฌ๋์๋ ๋ณํ๋ฅผ ์ผ์ผํค๋ ํจ์๋ก ๋๊ฐ์ง์ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ์์จ๋ค.
function reducer(state, action) {
// ์ํ ์
๋ฐ์ดํธ ๋ก์ง
return alteredState;
}
๋ฆฌ๋์๋ ํ์ฌ์ ์ํ์ ์ ๋ฌ๋ฐ์ ์ก์ ์ ์ฐธ๊ณ ํ์ฌ ์๋ก์ด ์ํ๋ฅผ ๋ง๋ค์ด์ ๋ฐํํ๋ค.
๋ฆฌ๋์ค์์๋ ํ ์ ํ๋ฆฌ์ผ์ด์ ๋น ํ๋์ ์คํ ์ด๋ฅผ ๋ง๋ค๊ฒ ๋ฉ๋๋ค. ์คํ ์ด ์์๋ ํ์ฌ ์ฑ ์ํ์ ๋ฆฌ๋์๊ฐ ๋ค์ด๊ฐ์๊ณ ์ถ๊ฐ์ ์ผ๋ก ๋ช ๊ฐ์ง ๋ด์ฅํจ์๋ค์ด ์๋ค.
๋์คํจ์น๋ ์คํ ์ด์ ๋ด์ฅํจ์ ์ค ํ๋๋ก ์ก์
์ ๋ฐ์์ํค๋ ๊ฒ์ด๋ผ๊ณ ์ดํดํ๋ฉด ๋๋ค. dispatch
๋ผ๋ ํจ์์ dispatch(action)
์ด๋ฐ ์์ผ๋ก, ์ก์
์ ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌํ๋ค.
ํธ์ถ์ ํ๋ฉด ์คํ ์ด๋ ๋ฆฌ๋์ ํจ์๋ฅผ ์คํ์์ผ์ ํด๋น ์ก์ ์ ์ฒ๋ฆฌํ๋ ๋ก์ง์ด ์๋ค๋ฉด ์ก์ ์ ์ฐธ๊ณ ํ์ฌ ์๋ก์ด ์ํ๋ฅผ ๋ง๋ค์ด์ค๋ค.
์คํ ์ด์ ๋ด์ฅํจ์ ์ค ํ๋๋ก subscribe
ํจ์๋ ํจ์ํํ์ ๊ฐ์ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ์์จ๋ค. subscribe
ํจ์์ ํน์ ํจ์๋ฅผ ์ ๋ฌํด์ฃผ๋ฉด ์ก์
์ด ๋์คํจ์น ๋์์ ๋๋ง๋ค ์ ๋ฌํด์ค ํจ์๊ฐ ํธ์ถ๋๋ค.
์ข์ ๊ธ์ ์จ์ฃผ์ Veloport๋๊ป ๊ฐ์ฌ๋๋ฆฝ๋๋ค.