[React] 리λμ€ (Redux)
π 리λμ€
리λμ€λ μ»΄ν¬λνΈ μΈλΆμμ μν κ΄λ¦¬λ₯Ό ν μ μλ 리μ‘νΈμ λνμ μΈ μ μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬μ λλ€.
μλ§μ μ»΄ν¬λνΈμ stateκ° μλ€λ©΄ props
λ¬Έλ²μ μ°κΈ° μ΄λ €μΈ λκ° μμ΅λλ€.
μ΄λ° κ²½μ°μ redux
λ₯Ό μ¬μ©ν©λλ€.
Redux
λ₯Ό μ€μΉνλ©΄ state
λ₯Ό 보κ΄ν μ μλ νμΌμ΄ λ§λ€μ΄μ§λλ€.
λͺ¨λ μ»΄ν¬λνΈλ€μ΄ νμΌμμ state
λ₯Ό κΊΌλ΄ μΈ μ μκΈ° λλ¬Έμ κ°νΈν μ½λ μμ±μ΄ κ°λ₯ν©λλ€.
π 리λμ€μ μ₯μ
1. μνκ΄λ¦¬κ° μ©μ΄νλ€.
μνκ΄λ¦¬κ° μ©μ΄νλ κ²μ state
κ΄λ¦¬κ° μ©μ΄νλ€λ λ»μ
λλ€.
state
λ₯Ό μμ ν΄μΌ νλ μν©μμ μ»΄ν¬λνΈμ λ°μ΄ν°λ₯Ό μ§μ μμ νλ κ²μ΄ μλλΌ μ»΄ν¬λνΈλ€μ΄ Redux
μ μμ μμ²μ ν©λλ€.
μμ μμ²μ λ°μ Redux
λ state
λ₯Ό μμ ν©λλ€.
2. λ―Έλ€μ¨μ΄λ₯Ό νμ©ν λ€μν κΈ°λ₯ μΆκ°
λ°μ΄ν°λ₯Ό μ²λ¦¬νλ μ€κ°κ³Όμ μμ μ΄λ€ λ‘μ§μ λ£μ΄μ νμν κΈ°λ₯μ μΆκ°ν μ μμ΅λλ€.
λ―Έλ€μ¨μ΄μμ λ‘컬 μ€ν 리μ§μ λ°μ΄ν°λ₯Ό μ μ₯νκ±°λ λ‘컬 μ€ν 리μ§μμ λ°μ΄ν°λ₯Ό λΆλ¬μ€λ κΈ°λ₯μ κ°λ¨νκ² κ΅¬νν μ μμ΅λλ€.
3. SSRμ λ°μ΄ν° μ λ¬μ΄ κ°νΈνλ€.
리λμ€μ μνκ°μ νλμ κ°μ²΄λ‘ ννμ΄ κ°λ₯ν©λλ€.
μλ²λ μνκ°μ κ°μ²΄λ‘ λ§λ€μ΄ λ¬Έμμ΄λ‘ λ³νν΄μ ν΄λΌμ΄μΈνΈλ‘ μ λ¬νλλ°, ν΄λΌμ΄μΈνΈλ λ°μ λ¬Έμμ΄μ νλμ κ°μ²΄λ‘ λ³νν΄μ μ¬μ©ν©λλ€.
νλμ κ°μ²΄λ‘ κ΄λ¦¬κ° λκΈ° λλ¬Έμ κ³Όκ±°μ μνλ‘ μ μ₯νλ€κ° κ³Όκ±°μ μνλ‘ λμκ°λ κ²μ κ°λ¨ν ꡬνν μ μμ΅λλ€.
4. 리μ‘νΈ μ½ν μ€νΈλ³΄λ€ ν¨μ¨μ μΈ λ λλ§μ΄ κ°λ₯νλ€.
π 리λμ€λ₯Ό μ¬μ©ν λ κ·μΉ
- νλμ μ ν리μΌμ΄μ μ νλμ μ€ν μ΄κ° μλ€. μ€ν μ΄λ₯Ό νκ° μ΄μ λ§λ€λ©΄ μλλ€.
- μνλ μ½κΈ°μ μ©μ΄λ€. μ¦, λΆλ³μ±μ μ§μΌμ£Όμ΄μΌ νλ€.
- λ³νλ₯Ό μΌμΌν€λ ν¨μ 리λμλ μμν ν¨μμ¬μΌ νλ€. λμΌν κ°μ λ°μμ λμΌν κ°μ λ°νν΄μΌ νλ€. ex)
new Date()
xxx
π 리λμ€μμ μ°λ ν€μλ
1. action
- μνμ μ΄λ€ λ³νκ° νμν λ
action
μ λ°μμν¨λ€. - νλμ κ°μ²΄λ‘ ννλλ€.
action
κ°μ²΄λtype
κ°μ νμλ‘ κ°μ§κ³ μλ€.
{
type: 'TOGGLE_VALUE'
data: {
id: 0,
text: "리λμ€ λ°°μ°κΈ°"
}
}
2. μ‘μ μμ±ν¨μ(Action Creator)
- μ‘μ μ λ°μμν€λ ν¨μ
- νλΌλ―Έν°λ₯Ό λ°μμμ μ‘μ κ°μ²΄λ₯Ό λ§λ€μ΄μ£Όλ ν¨μ
- 리λμ€μμ μ‘μ μμ±ν¨μκ° νμμ μ΄μ§ μμ§λ§ μ‘μ κ°μ²΄λ₯Ό λ νΈνκ² λ§λ€ μ μλ€.
export function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// νμ΄ν ν¨μ λ²μ
export function changeInput = text => ({
type: "CHANGE_INPUT",
text
});
3. 리λμ(Reducer)
- λ³νλ₯Ό μΌμΌν€λ ν¨μ
state
,action
μ΄λΌλ νλΌλ―Έν°λ₯Ό κ°μ Έμ¨λ€.- 리λμμμλ λΆλ³μ±μ μ μ§ν΄μΌνλ―λ‘ κΈ°μ‘΄μ κ°μ²΄λ λ°°μ΄μ 건λλ¦¬μ§ μκ³ μλ‘μ΄ κ°μ²΄λ λ°°μ΄λ‘ λ§λ€μ΄μΌνλ€. ex)
concat
,spread
β¦ default
μμλ κΈ°μ‘΄μstate
λ₯Ό λ°ννλ κ²μ΄ μΌλ°μ μ΄λ€.
function counter(state, action) {
switch (action.type) {
case "INCREASE":
return state + 1;
case "DECREASE":
return (state = 1);
default:
return state;
}
}
4. μ€ν μ΄(store)
- 리λμ€μμ νλμ μ ν리μΌμ΄μ λΉ νλμ μ€ν μ΄λ₯Ό λ§λ λ€.
- μ€ν μ΄ μμλ νμ¬ μ±μ μνμ 리λμ, λ΄μ₯ν¨μλ€μ΄ λ€μ΄μλ€.
4. λμ€ν¨μΉ(dispatch)
- μ€ν μ΄μ λ΄μ₯ν¨μλ€ μ€ νλ
- μ‘μ μ λ°μμν€λ κ²
- μ‘μ μ μ€ν μ΄μ μ λ¬νλ€.
dispatch({ type: "INCREASE" });
5. ꡬλ (subscribe)
- μ€ν μ΄μ λ΄μ₯ν¨μλ€ μ€ νλ
subscribe
ν¨μλ₯Ό νΈμΆν λ νλΌλ―Έν°λ‘ νΉμ ν¨μλ₯Ό λ£μ΄μ£Όλ©΄ μ‘μ μ΄ λμ€ν¨μΉλ λ λ§λ€ λ°μμ¨ ν¨μλ₯Ό νΈμΆνλ€.- 리λμλ₯Ό μ¬μ©ν λ μ§μ μ¬μ©νλ μΌμ μλ€.
π¬ μ΅μ λκΈ