Reducer

Reducer

1. Reducer

 - 상태 관리를 위해 사용

 - 복잡한 상태를 가진 컴포넌트에서 상태 업데이트 로직을 분리하여 관리할 수 있음

 - 즉, 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수임

 

2. 사용방법

 - ReducerEx.js

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

const ReducerEx = () => {
  // 첫 번째 파라미터 (reducer): 위의 reducer 함수를 의미
  // 두 번째 파라미터 ({value : 0}) : 위 함수의 상태 값을 의미
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <>
      <h1>현재 값은 {state.value} 입니다.</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </>
  );
};

export default ReducerEx;

 

 - App.js

import React from "react";
import ReducerEx from "./ReducerEx";

const App = () => {
  return (
    <>
      <ReducerEx />
    </>
  );
};

export default App;

 

 - 결과