[React] useReducer

---

1.useReducer

1-1.reducer 함수

상태(state)를 업데이트하는 함수 
현재 상태(state)와 액션(action)을 받아서 새로운 상태(state)를 반환하는 역할을 한다.

function reducer(state, action) {
  switch (action.type) {
    case 'ADD':// 새로운 작업을 tasks 배열에 추가
      return { 
        ...state, 
        tasks: [...state.tasks, action.newTask] 
      };
    case 'DELETE':// 특정 id를 가진 작업을 삭제
      return {
        ...state,
        tasks: state.tasks.filter(t => t.id !== action.id) 
      };
    default:
      return state;  // 기본 상태 반환 (변경되지 않음)
  }
}

 

 

1-2.useReducer

상태 관리의 복잡한 로직을 다룰 때 사용되는 훅
reducer 함수, 초기 상태를 인자로 받아서 사용한다.
useReducer는 상태(state)와 액션을 보내는 함수(dispatch)를 반환한다.

const [state, dispatch] = useReducer(reducer, initialState);

 

 

 

1-3.dispatch

액션 객체를 전달받는다. 액션 객체는 최소한 type 속성을 가진다.

dispatch({ type: "ADD", id: 1 });
//type: 액션의 종류를 나타내는 문자열.
//id : type에 따라 전달되는 추가 데이터

 

 

 

import React, { useReducer } from 'react';

// Task 타입 정의
interface Task {
  id: number;
  name: string;
}

// 상태 타입 정의
interface State {
  tasks: Task[];
}

// 액션 타입 정의
interface Action {
  type: 'ADD' | 'DELETE';
  newTask?: Task;  // ADD 액션에서만 사용
  id?: number;     // DELETE 액션에서만 사용
}

// 상태 초기값 정의
const initialState: State = { tasks: [] };

// reducer 함수 정의
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'ADD':
      if (action.newTask) {
        return { ...state, tasks: [...state.tasks, action.newTask] };
      }
      return state;
    case 'DELETE':
      if (action.id !== undefined) {
        return { ...state, tasks: state.tasks.filter(t => t.id !== action.id) };
      }
      return state;
    default:
      return state;
  }
}

function TaskManager() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // 작업 추가 함수
  const addTask = (newTask: Task) => {
    dispatch({ type: 'ADD', newTask });
  };

  // 작업 삭제 함수
  const deleteTask = (taskId: number) => {
    dispatch({ type: 'DELETE', id: taskId });
  };

  return (
    <div>
      <h1>Task List</h1>
      <ul>
        {state.tasks.map(task => (
          <li key={task.id}>
            {task.name} <button onClick={() => deleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addTask({ id: Date.now(), name: 'New Task' })}>
        Add Task
      </button>
    </div>
  );
}

export default TaskManager;