여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - Hooks - useReducer 훅
React – Hooks – useReducer 훅
4개월전 작성
5개월전 수정

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
밍구
공부 목적 블로그