[React] useReducer를 이용한 상태관리

안녕하세요, 피터팬입니다!

오늘은 Reducer에 대해 알아볼 건데요

useRedcuer는, State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook입니다.

useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다.

 

적용법

import { useReducer } from "react";

 

사용법

1. reducer 선언

const reducer = (state,action){
  switch(action.type){
    case "INCREMENT":
      return (~)
    default:
      return (~)
  }
}

state ; reducer가 불리는 시점의 data

action ; 업데이트를 위한 정보를 가짐(type,value 등)

 

 

2. useReducer 선언

const [state,dispatch] = useReducer(reducer,initialState);

state ; 앞으로 컴포넌트에서 사용할 수 있는 state

dispatch ; action을 발생시키는 함수

 

3. dispatch를 통한 사용

dispatch 내의 객체(type,value 등)은 reducer의 action에 들어감

dispatch({type:"INCREMENT" , value:3})

 

예시

1. reducer 선언

const reducer = (state, action) => {
  switch (action.type) {
    case "USER_INPUT":
      return { value: action.val, isValid: action.val.includes("@") };
    case "INPUT_BLUR":
      return { value: state.value, isValid: state.value.includes("@") };
    default:
      return { value: "", isValid: false };
  }
};

2. useReducer 선언

  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: "",
    isValid: null,
  });

3. dispatch함수 사용

  const emailChangeHandler = (event) => {
    dispatchEmail({ type: "USER_INPUT", val: event.target.value });
  };

 

 

---

Reference

https://ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React