[React] λ¦¬λ•μŠ€ (Redux)

πŸ“„ λ¦¬λ•μŠ€

λ¦¬λ•μŠ€λŠ” μ»΄ν¬λ„ŒνŠΈ μ™ΈλΆ€μ—μ„œ μƒνƒœ 관리λ₯Ό ν•  수 μžˆλŠ” λ¦¬μ•‘νŠΈμ˜ λŒ€ν‘œμ μΈ μ „μ—­ μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€.

μˆ˜λ§Žμ€ μ»΄ν¬λ„ŒνŠΈμ™€ stateκ°€ μžˆλ‹€λ©΄ props문법을 μ“°κΈ° μ–΄λ €μšΈ λ•Œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

이런 κ²½μš°μ— reduxλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

Reduxλ₯Ό μ„€μΉ˜ν•˜λ©΄ stateλ₯Ό 보관할 수 μžˆλŠ” 파일이 λ§Œλ“€μ–΄μ§‘λ‹ˆλ‹€.

λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈλ“€μ΄ νŒŒμΌμ—μ„œ stateλ₯Ό κΊΌλ‚΄ μ“Έ 수 있기 λ•Œλ¬Έμ— κ°„νŽΈν•œ μ½”λ“œ μž‘μ„±μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€.

πŸ“„ λ¦¬λ•μŠ€μ˜ μž₯점

1. μƒνƒœκ΄€λ¦¬κ°€ μš©μ΄ν•˜λ‹€.

μƒνƒœκ΄€λ¦¬κ°€ μš©μ΄ν•˜λŠ” 것은 state관리가 μš©μ΄ν•˜λ‹€λŠ” λœ»μž…λ‹ˆλ‹€.

stateλ₯Ό μˆ˜μ •ν•΄μ•Ό ν•˜λŠ” μƒν™©μ—μ„œ μ»΄ν¬λ„ŒνŠΈμ˜ 데이터λ₯Ό 직접 μˆ˜μ •ν•˜λŠ” 것이 μ•„λ‹ˆλΌ μ»΄ν¬λ„ŒνŠΈλ“€μ΄ Redux에 μˆ˜μ •μš”μ²­μ„ ν•©λ‹ˆλ‹€.

μˆ˜μ •μš”μ²­μ„ 받은 ReduxλŠ” stateλ₯Ό μˆ˜μ •ν•©λ‹ˆλ‹€.

2. 미듀웨어λ₯Ό ν™œμš©ν•œ λ‹€μ–‘ν•œ κΈ°λŠ₯ μΆ”κ°€

데이터λ₯Ό μ²˜λ¦¬ν•˜λŠ” μ€‘κ°„κ³Όμ •μ—μ„œ μ–΄λ–€ λ‘œμ§μ„ λ„£μ–΄μ„œ ν•„μš”ν•œ κΈ°λŠ₯을 μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ―Έλ“€μ›¨μ–΄μ—μ„œ 둜컬 μŠ€ν† λ¦¬μ§€μ— 데이터λ₯Ό μ €μž₯ν•˜κ±°λ‚˜ 둜컬 μŠ€ν† λ¦¬μ§€μ—μ„œ 데이터λ₯Ό λΆˆλŸ¬μ˜€λŠ” κΈ°λŠ₯을 κ°„λ‹¨ν•˜κ²Œ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

3. SSRμ‹œ 데이터 전달이 κ°„νŽΈν•˜λ‹€.

λ¦¬λ•μŠ€μ˜ μƒνƒœκ°’μ€ ν•˜λ‚˜μ˜ 객체둜 ν‘œν˜„μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€.

μ„œλ²„λŠ” μƒνƒœκ°’μ„ 객체둜 λ§Œλ“€μ–΄ λ¬Έμžμ—΄λ‘œ λ³€ν™˜ν•΄μ„œ ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „λ‹¬ν•˜λŠ”λ°, ν΄λΌμ΄μ–ΈνŠΈλŠ” 받은 λ¬Έμžμ—΄μ„ ν•˜λ‚˜μ˜ 객체둜 λ³€ν™˜ν•΄μ„œ μ‚¬μš©ν•©λ‹ˆλ‹€.

ν•˜λ‚˜μ˜ 객체둜 관리가 되기 λ•Œλ¬Έμ— 과거의 μƒνƒœλ‘œ μ €μž₯ν–ˆλ‹€κ°€ 과거의 μƒνƒœλ‘œ λŒμ•„κ°€λŠ” 것을 κ°„λ‹¨νžˆ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

4. λ¦¬μ•‘νŠΈ μ½˜ν…μŠ€νŠΈλ³΄λ‹€ 효율적인 λ Œλ”λ§μ΄ κ°€λŠ₯ν•˜λ‹€.

πŸ“„ λ¦¬λ•μŠ€λ₯Ό μ‚¬μš©ν•  λ•Œ κ·œμΉ™

  1. ν•˜λ‚˜μ˜ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—” ν•˜λ‚˜μ˜ μŠ€ν† μ–΄κ°€ μžˆλ‹€. μŠ€ν† μ–΄λ₯Ό ν•œκ°œ 이상 λ§Œλ“€λ©΄ μ•ˆλœλ‹€.
  2. μƒνƒœλŠ” μ½κΈ°μ „μš©μ΄λ‹€. 즉, λΆˆλ³€μ„±μ„ μ§€μΌœμ£Όμ–΄μ•Ό ν•œλ‹€.
  3. λ³€ν™”λ₯Ό μΌμœΌν‚€λŠ” ν•¨μˆ˜ λ¦¬λ“€μ„œλŠ” μˆœμˆ˜ν•œ ν•¨μˆ˜μ—¬μ•Ό ν•œλ‹€. λ™μΌν•œ 값을 λ°›μ•„μ„œ λ™μΌν•œ 값을 λ°˜ν™˜ν•΄μ•Ό ν•œλ‹€. 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ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ νŒŒλΌλ―Έν„°λ‘œ νŠΉμ • ν•¨μˆ˜λ₯Ό λ„£μ–΄μ£Όλ©΄ μ•‘μ…˜μ΄ λ””μŠ€νŒ¨μΉ˜λ  λ•Œ λ§ˆλ‹€ λ°›μ•„μ˜¨ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œλ‹€.
  • λ¦¬λ“€μ„œλ₯Ό μ‚¬μš©ν•  λ•Œ 직접 μ‚¬μš©ν•˜λŠ” 일은 μ—†λ‹€.

좜처

Leave a comment