React

useReducer

useReducer 훅은 useState 훅과 유사하다.

사용자 지정 상태 로직을 허용한다.

복잡한 논리에 의존하는 여러 상태를 추적하고 있다면 userReducer가 유용할 수 있다.

구문

‘userReducer’ Hook은 두 가지 인수를 받아들인다.

useReducer(, )

감속기 함수에는 사용자 지정 상태 로직이 포함되며 초기 상태는 단순한 값일 수 있지만 일반적으로 개체가 포함된다.

‘userReducer’ Hook은 현재 상태와 디스패치 방법을 반환한다.

예제

다음은 카운터 앱에서 ‘userReducer’의 예이다.

import { useReducer } from "react";
import ReactDOM from "react-dom/client";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Todos />);

이것은 작업 완료 상태를 추적하기 위한 논리일 뿐이다.

추가, 삭제 및 작업 완료를 위한 모든 로직을 하나의 ‘userReducer’ Hook에 포함시킬 수 있다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기