You will learn

• reducer 함수란 무엇인지
• useState 를 useReducer로 리팩토링 하는법
• 언제 reducer를 사용해야 하는지
• 좋은 reducer를 작성하는 방법

state 로직을 Reducer로 통합하기

컴포넌트의 state를 업데이트하는 로직이 여러 이벤트 핸들러에 분산되어 있는 경우 관리하기에 너무 복잡할 수 있다. 이런 경우 state 업데이트 로직을 컴포넌트 밖의 하나의 함수로 모두 모아 사용할 수 있는데, 이 함수를 reducer라고 부른다.

컴포넌트의 복잡성이 증가하면서 컴포넌트의 각 state들이 어떻게 업데이트 되는지 한눈에 파악하기가 어려워 진다.

예를들어 TaskApp 컴포넌트에서 task state를 업데이트 하는 로직이 있다고 가정해보자 :

• 할 일을 추가하는 handleAddTask
• 할 일을 수정하는 handleChangeTask
• 할 일을 제거하는 handleDeleteTask

이 이벤트 핸들러들은 setTask라는 state 업데이트 함수를 내부적으로 호출할 것이다. 컴포넌트가 커질수록 이러한 로직의 코드를 관리하기 어려워진다.

이제 reducer를 도입하면 이런 문제를 예방하고 해결할 수 있는데, 아래와 같은 과정을 통해 모든 state 변경 로직을 reducer라는 하나의 코드로 뭉칠 수 있다.

1. Move : state를 설정(set)하는 방식에서 action을 전달(dispatch)하는 방식으로 전환
2. Write : reducer 함수를 작성
3. Use : 컴포넌트에서 reducer를 사용

1. Move : set state에서 action dispatch로 전환하기

현재 이벤트 핸들러들은 이렇게 직접적으로 어떻게 행동해야 하는지 특정하고 있다. 즉 state를 설정(set)하고 있는 것이다.

function handleAddTask(text) {
  setTasks([...tasks, {
    id: nextId++,
    text: text,
    done: false
  }]);
}

function handleChangeTask(task) {
  setTasks(tasks.map(t => {
    if (t.id === task.id) {
      return task;
    } else {
      return t;
    }
  }));
}

function handleDeleteTask(taskId) {
  setTasks(
    tasks.filter(t => t.id !== taskId)
  );
}

Reducer를 사용하는 방식은 이와 조금 다르다. 이벤트 핸들러에서 직접 state를 설정하는 대신, 사용자가 방금 어떤 행동을 했는지를 특정하고 이에 맞는 action을 보낸다(dispatch).

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,
  });
}

dispatch 함수 안의 객체를 action 이라고 부른다. action은 일반적인 자바스크립트 객체라서 필수적인 필드와 같은 규칙은 없다. 하지만 기능을 제대로 사용하기 위해서 type 과 같은 필드를 통해 적어도 어떤 행동을 했는지를 구분할 수 있는 최소한의 정보가 필요하다.

2. Write : reducer 함수 작성하기

이제 state 로직을 모아둔 reducer 함수를 작성해야 한다. reducer 함수는 두 개의 인자를 받는데, 현재 state와 action 객체이다.

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

리액트는 state를 reducer가 반환하는 것으로 설정(set)할 것이다.

위의 예시에 맞는 reducer를 작성하면 이렇게 된다 :

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);
  }
}

인자로 전달받은 state인 tasks를 받아 정해진 로직을 수행하고 새로운 tasks를 반환하는 것이다.

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

원래 useState 훅을 사용하면 코드는 이럴것이다 :

const [tasks, setTasks] = useState(initialTasks);

그리고 이 setTasks를 각 이벤트 핸들러에서 호출하여 state를 변경하는게 기존의 방식이었다.

useReducer 훅을 사용하면 코드는 이렇게 된다 :

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

setTasks 함수 대신 dispatch 함수를 반환하고, 이걸 사용하여 reducer에게 state 변경의 자세한 내용을 전달한다.

useState와 useReducer 비교

• 코드량 : useState를 통해 state를 관리하는 경우, 일일이 setState로 state 변경 내용을 직접 작성해야하는데, 그래서 이벤트 핸들러의 종류가 많을수록 코드가 늘어난다. 하지만 useReducer로 state를 관리하면, 이벤트 핸들러가 늘어나도 많은 코드가 새로 작성될 필요가 없다.
• 가독성 : useReducer는 어떻게와 무엇의 코드를 분리하게 해주어 컴포넌트의 코드에 가독성을 매우 높여줄 수 있다.
• 디버깅 : useState사용중 버그를 발견한다면, 종종 정확히 어디서, 왜 state 를 잘못 설정(set)했는지 찾기 어려울 수 있다. 하지만 reducer 를 사용해 모든 state 변경을 한곳에 모아둔다면, reducer 함수 안에 type과 전달 받은 state를 출력해보는 등의 간단한 코드만으로 버그를 추적하기 쉬워진다.
• 테스팅 : reducer는 컴포넌트에 의존하지 않는 순수 함수다. 그래서 state 변경 로직이 복잡하여 따로 테스트를 진행하고 싶을 때 독립적으로 검증할 수 있다.

reducer 작성 규칙

• 순수해야 한다. reducer도 어쨋든 state 변경 함수이고, 그래서 렌더링 중에 실행된다. 렌더링 단계에서 실행되는 모든 코드는 순수해야 한다는 원칙을 따라야 한다.
• 모든 action은 단 하나의 사용자 행동을 설명해야 한다. 심지어 여러 데이터 변경이 있더라도. 예를들어 사용자가 "Reset" 버튼을 누른다면, 그게 여러개의 필드의 값을 변경하더라도 하나의 action 이어야 한다.

예시 문제

4. useReducer훅 직접 구현하기

//App.js
export default function Messenger() {
  const [state, dispatch] = useReducer(messengerReducer, initialState);
  const message = state.messages[state.selectedId];
  const contact = contacts.find((c) => c.id === state.selectedId);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedId={state.selectedId}
        dispatch={dispatch}
      />
      <Chat
        key={contact.id}
        message={message}
        contact={contact}
        dispatch={dispatch}
      />
    </div>
  );
}

const contacts = [
  {id: 0, name: 'Taylor', email: 'taylor@mail.com'},
  {id: 1, name: 'Alice', email: 'alice@mail.com'},
  {id: 2, name: 'Bob', email: 'bob@mail.com'},
];

//messengerReducer.js
export const initialState = {
  selectedId: 0,
  messages: {
    0: 'Hello, Taylor',
    1: 'Hello, Alice',
    2: 'Hello, Bob',
  },
};

export function messengerReducer(state, action) {
  switch (action.type) {
    case 'changed_selection': {
      return {
        ...state,
        selectedId: action.contactId,
      };
    }
    case 'edited_message': {
      return {
        ...state,
        messages: {
          ...state.messages,
          [state.selectedId]: action.message,
        },
      };
    }
    case 'sent_message': {
      return {
        ...state,
        messages: {
          ...state.messages,
          [state.selectedId]: '',
        },
      };
    }
    default: {
      throw Error('Unknown action: ' + action.type);
    }
  }
}

//MyReact.js
import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  // ???

  return [state, dispatch];
}

여기서 MyReact.js 파일을 완성해 useReducer 훅을 직접 구현해야 한다.

일단 useReducer는 state와 dispatch를 반환한다. state는 이미 작성되어 있으니 나머지 반환값인 dispatch 함수를 작성해서 완성해야 한다.

1. dispatch는 action객체를 인자로 받는다.

//MyReact.js
import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action){
  //...
  }

  return [state, dispatch];
}

2. reducer 매개변수를 통해 messengerReducer를 주입 받았는데, messengerReducer는 action의 종류에 따라 데이터를 처리하여 반환한다.

//MyReact.js
import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action){
  const temp = reducer(state,action);
  //...
  }

  return [state, dispatch];
}

3. temp는 업데이트된 state다. 이제 이걸 setState() 함수를 호출해 state를 업데이트하고 리렌더를 진행해야 한다.

//MyReact.js
import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action){
  const temp = reducer(state,action);
  setState(temp);
  }

  return [state, dispatch];
}