[React] useReducer로 상태를 다뤄보자

 

들어가기 전

우리는 단순히 상태를 관리할 때 useState를 사용해왔다. 하지만 여러개의 상태의 값을 구분 지어서 사용할 때가 있을 것이다. 그때에도 과연 useState만을 고집할 것인가? 그래서 오늘 그 문제를 해결해보고자 useReducer에 대해서 알아 볼 것이다.

 

 

목차

1.  useReducer 란?

2.  state, dispatch, initialState

3.  사용방법 및 사용예제

 

1.  useReducer 란?

- useReducer는 상태관리를 하는 hook으로 useState를 대체할 수 있다.

- 복잡한 여러개의 상태를 다룰 경우 사용할 때 용이하다.

- 비동기 처리시에도 가독성의 장점을 가질 수 있다.

 

2.  state, dispatch, initialState

useReducer를 사용하기 위해서는 위의 세가지에 대해서 알아야한다.

 

1) state : 사용할 상태 변수

2) dispatch

- reducer의 함수를 실행시킨다. (상태를 업데이트 할 때 사용한다.)

- 객체로 전달을 매개변수로 받아서 상태를 업데이트 시킨다.

- 객체의 내용에는 어떤 행동을 취할거냐의 상태를 업데이트 할 때 사용할 값들이 있다.

- reducer의 함수의 내용은 조건문으로 작성을 해서 전달받은 행동의 값을 조건처리해서 상태를 업데이트 해준다.

- reducer의 함수(메뉴판이라고 생각하면 된다.)

3) initialState : 초기값을 전달할 객체

- reducer 는 이전 상태와 action의 객체의 내용 가독성을 좋게 처리할 수 있다.

 

3.  사용방법 및 사용예제

(React에서 App.js는 생략하고 코드예제를 살펴보려 한다.)

 

Const.js

// 자주 사용하는 상수
// tip : 개발자가 개발을 할 때 개발자의 가독성을 좋게 만들어주기 위해서
// 상수를 대문자로 표기하기도 한다.

export const INCREMENT = "increment";
export const DECREMENT = "decrement";

 

Reducer.jsx

import React, { useEffect, useReducer } from 'react';
import { INCREMENT, DECREMENT } from './Const';

const ReducerCom = () => {
  const initialState = {
    count: 0
  };
  
  // 메뉴판
  const reducer = (state, action) => {
    const { type, payload } = action;
    // type 어떤 행동을 취할건지를 알려준다.
    switch(type){
      case INCREMENT :
        return {...state, count: state.count + 1}
      case DECREMENT :
        return {...state, count: state.count - 1}
      default : return state;
    }
  }
  
  const [state, dispatch] = useReducer(reducer, initialState);
  
  const handlerIncrement = () => {
    dispatch({type: INCREMENT});
  }
  
  const handlerDecrement = () => {
    dispatch({type: DECREMENT);
  }
  
  useEffect(() => {
    console.log(state.count);
  }, [state.login]);
  
  return (
    <div>
      count : {state.count}
      <button onClick={handlerIncrement}>증가</button>
      <button onClick={handlerDecrement}>감소</button>
    </div>
  )
}

export default ReducerCom;