[React] useReducer 사용하기

state 로직을 reducer로 작성하기 – React

 

위 페이지의 내용을 공부하면서 정리한 글입니다.

 

언제 쓰나?

• 여러 컴포넌트에서 같은 로직이 반복될 때(ex: 배열 필터링, 배열 요소 삭제 등) 실수를 줄이고 로직을 동시에 변경하기 쉬움
• 로직을 직관적으로 나타내고 싶을 때

예를 들어 setState(state => state.push(data)) 대신 dispatch({"add", data}); 로 좀더 직관적으로 나타낼 수 있음

 

 

어떻게 쓰나?

• Redux처럼 state와 action을 파라미터로 하여 Reducer 함수를 만듦.
• state에는 말 그대로 현재까지의 상태값이 저장되고, action을 통해 이 state를 조작할 수 있음.
• 보통 switch문으로 case를 나눠서 씀.

export const tasksReducer = (tasks, action) => {
  switch (action.type) {
    case "added": {
      return [...tasks, {
        id: action.id,
        text: action.text,
      }];
    }
    
    case "deleted": {
      return tasks.filter(t => t.id !== action.id);
    }
    
    default: {
      throw Error("Unknown action: " + action.type);
    }
  }
}

 

Reducer 함수의 정의 부분입니다. 개인적인 생각으로는 문자열로 케이스를 나누기보단 enum 타입으로 나누는 게 더 좋을 것 같습니다.

 

import { useReducer } from "react";
import tasksReducer from "./tasksReducer.js";

const initialTasks = []; 

export const TaskApp = () => {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
  
  const addTask = () => {
    dispatch({type: "added", id: 3, text: "doringri"});
  }
  
  ...
}

 

Reducer 함수는 위와 같이 dispatch로 사용합니다.