React - useReducer

목차

• Introduction
• useState와의 차이점
• reducer
• useReducer
• Conclusion

📌 Introduction

안녕하세요. 오늘은 react에서 또다른 state관리 hook인 useReducer에 대해서 알아보겠습니다. useReducer는 vuex와 비슷하다고 생각하면 됩니다. action을 통해 상태를 변경해줄 수 있다는 점에서 비슷합니다.

📌 useState와의 차이점

일단 useState에서 값을 바꿔줄때는 다음과 같습니다.

setState(5);

이렇게 setState를 이용하여 바꿔주게 되는데 useReducer는 조금 다릅니다.

dispatch({ type: INCREMENT });

이렇게 action에 type을 받아 값을 바꾸는 것을 수행하게 됩니다. 또한 useState와 달리 컴포넌트 밖에서도 상태 업데이트 로직을 수행할 수 있습니다.

📌 reducer

먼저 useReducer를 사용하기 전에 reducer를 먼저 알아야 합니다.

기본적인 구조는 이렇게 생겼습니다.

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

이렇게 reducer는 switch문을 통해 type으로 실행을 시키게 됩니다.

📌 useReducer

다음은 기본적인 useReducer 문법입니다.

const [number, dispatch] = useReducer(reducer, 0);

useReducer에 첫번째 인자로는 reducer가 들어가게 되고 두번째 인자로는 초기 값을 넣습니다. 그리고 return 값으론 초기 값이 설정된 number와 dispatch를 array로 return 합니다.

간단하게 counter로 useReducer를 구현해보겠습니다.

import React, { useReducer } from "react";

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

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

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: INCREMENT });
  };
  const onDecrease = () => {
    dispatch({ type: DECREMENT });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
}

export default Counter;

또한 dispatch를 사용할때 type외에 다른 값들도 인자로 넣어줄수 있습니다.

dispatch({ type: SET_COUNT, value: 0 });

📌 Conclusion

이렇게 오늘은 한번 useReducer를 알아봤습니다. vuex에서의 action과 사뭇 비슷한 모습을 보이네요. 그럼 다음 포스팅에서 만나요~ 안녕~