[React] Reducer

Reducer 함수를 사용하는 이유

컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 상황을 한눈에 파악하기 어려울 수 있다.

따라서 Reducer를 이용해 state를 관리하면 state 로직의 양을 줄이고, 복잡성을 줄일 수 있다.

(접근하기 쉽게 한 곳으로 모아주는 역할)

 

useState에서 useReducer로 마이그레이션 하는 방법

1. state 설정을 action들의 전달로 바꾸기

2. reducer 함수 작성하기

3. 컴포넌트에서 reducer 사용하기

---

1. state 설정을 action들의 전달로 바꾸기

dispatch 함수에 넣어준 객체를 “action”이라고 한다.

일반적으로 무슨 일이 일어났는지 에 대한 최소한의 정보를 포함한다. (type에 string으로 작성)

 

예시)

function handleAddTask(text) {
  dispatch({
    type: 'added',
    id: nextId++,
    text: text,
  });
}

function handleChangeTask(task) {
  dispatch({
    type: 'changed',
    task: task,
  });
}

function handleDeleteTask(taskId) {
  dispatch({
    type: 'deleted',
    id: taskId,
  });
}

2. reducer 함수 작성하기

reducer 함수에 state 로직을 둘 수 있다. 

reducer로부터 반환된 것을 state로 설정한다.

function yourReducer(state, action) {
  // return next state for React to set
}

예시) (여기는 if, else 구문을 사용했지만 switch 구문을 사용하는 게 일반적)

function tasksReducer(tasks, action) {
  if (action.type === 'added') {
    return [
      ...tasks,
      {
        id: action.id,
        text: action.text,
        done: false,
      },
    ];
  } else if (action.type === 'changed') {
    return tasks.map((t) => {
      if (t.id === action.task.id) {
        return action.task;
      } else {
        return t;
      }
    });
  } else if (action.type === 'deleted') {
    return tasks.filter((t) => t.id !== action.id);
  } else {
    throw Error('Unknown action: ' + action.type);
  }
}

 

3. 컴포넌트에서 reducer 사용하기

import { useReducer } from 'react';

const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

React에서 useReducer 훅을 import하고, useState 대신 useReducer 훅을 사용해준다.

'reducer 함수'와 '초기 state'를 인자로 받는다.

state 값과 state 설정자 함수 (useReducer의 경우 dispatch 함수)를 반환한다.
(여기선 state값=tasks

 

useState와 유사하기 '초기 state 값'을 전달해야 하고, 그 결과로 state 값과 state 설정자 함수 (useReducer의 경우 dispatch 함수)를 반환한다.

 

 

useState vs useReducer

1. 코드 크기

useState는 미리 작성해야 하는 코드 ↓

하지만 많은 이벤트 핸들러가 비슷한 방식으로 state를 업데이트하는 경우 useReducer를 사용하면 코드를 줄이는 데 도움이 될 수 있다.

 

2. 가독성

간단한 state를 업데이트할 땐 useState가 가독성 ↑

복잡한 state 구조를 가지고 있을 땐 useReducer를 사용해야 어떻게 동작 하는지와 이벤트 핸들러를 통해 무엇이 일어났는지 를 깔끔하게 분리할 수 있다.

 

3. 디버깅

 useReducer를 사용하면, reducer에 콘솔 로그를 추가하여 모든 state 업데이트와 왜 (어떤 action으로 인해) 버그가 발생했는지 확인할 수 있습니다.

 

4. 테스팅

reducer는 컴포넌트에 의존하지 않는 순수한 함수입니다. 즉, 별도로 분리해서 내보내거나 테스트할 수 있습니다.