🔍 useReducer

한 입 크기로 잘라 먹는 리액트 섹션 10 - useReducer

useReducer 란?

컴포넌트 내부에 새로운 State를 생성하는 React Hook이다.
모든 useState는 useReducer로 대체 가능하다.
상태 관리 코드를 컴포넌트 외부로 분리할 수 있다는 차이점이 있다.

function App() {
  const [todos, setTodos] = useState(mockData);
  const idRef = useRef(3);

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };

    setTodos([newTodo, ...todos]);
  };

컴포넌트 내부에 상태 관리 코드를 작성한 것

function reducer() {
//...
}

function App() {
	const [todos, dispatch] = useReducer(reducer);
    
    //...
}

useReducer를 사용하면, 컴포넌트 외부에 상태 관리 코드를 분리하여 작성할 수 있다.

실습:

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.tye) {
    case "INCREASE":
      return state + action.data;
    case "Decrease":
      return state - action.data;
    default:
      return state;
  }
}

const Exam = () => {
  const [state, dispatch] = useReducer(reducer, 0);

  const onClickPlus = () => {
    dispatch({
      type: "INCREASE",
      data: 1,
    });
  };

  const onClickMinus = () => {
    dispatch({
      type: "DECREASE",
      data: 1,
    });
  };

  return (
    <div>
      <h1>{state}</h1>
      <button>onClick={onClickPlus}</button>
      <button onClick={onClickMinus}>-</button>
    </div>
  );
};

export default Exam;

Exam.jsx에 다음과 같은 코드를 작성해보았다.
dispatch란? 상태 변화가 있어야 한다는 사실을 알리고 발송하는 함수이다.

todolist 코드에 이어서 실습

import "./App.css";
import { useState, useRef, useReducer } from "react";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";

const mockData = [
  {
    id: 0,
    isDone: false,
    content: "React 공부하기",
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: "코어타임 갖기",
    date: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: "일찍 일어나기",
    date: new Date().getTime(),
  },
];

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "UPDATE":
      return state.map((item) =>
        item.id === action.targetId ? { ...item, isDone: !item.isDone } : item
      );
    case "DELETE":
      return PopStateEvent.filter((item) => item.id !== action.targetId);
    default:
      return state;
  }
}

function App() {
  const [todos, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);

  const onCreate = (content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        isDone: false,
        content: content,
        date: new Date().getTime(),
      },
    });
  };

  const onUpdate = (targetId) => {
    dispatch({
      type: "UPDATE",
      targetId: targetId,
    });
  };

  const onDelete = (targetId) => {
    dispatch({
      type: "DELETE",
      targetId: targetId,
    });
  };

  return (
    <div className="App">
      <Header />
      <Editor onCreate={onCreate} />
      <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} />
    </div>
  );
}

export default App;

기존 코드에 Exam.jsx 를 만들어 코드를 추가해보면 useReducer를 사용해서 구현할 수 있다.

구현 화면: