[React.js] useReducer

useReducer란

컴포넌트 내부에 새로운 State를 생성하는 React Hook

모든 useState는 useReducer로 대체 가능 하다.

useReducer는 useState와는 다르게 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다.

 

Reducer 문법

import { useReducer } from "react";

//reducer: 변환기

const reducer = (state, action) => {

  console.log(state, action);

  if (action.type === "INCREASE") {

    return state + action.data;

  }

  if (action.type === "DECREASE") {

    return state - action.data;

  }

};

const Exam = () => {

  // dispatch : 발송하다, 급송하다

  // -> 상태 변화가 있어야 한다는 사실을 알리는, 발송하는 함수

  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;

 

ㅕㄴ

버튼을 눌럿을때 증감 또는 증가되는 상태변화를 Reducer를 사용해서 구현

 

Reducer의 장점은 상태변화 코드인 State코드가 많아져 유지관리하기 힘들때

컴포넌트 외부로 State관리 코드를 분리할 수 있다는 장점이 있다.