[React] useState vs useReducer

상태를 관리할 때 사용하는 것으로 useState와 useReducer 가 있다. 

하지만 일반적으로 useState를 사용하고 useReducer를 사용하는 일은 거의 없었다. 

 

그러다보니 궁금함이 생겼다. 

useReducer는 언제 사용하고, 왜 사용하는 것일까? 

 

먼저 간략하게 둘의 차이를 알아보자.

useState

▶ 간단한 상태 관리

   ▷ 값이 하나인 경우 

   ▷ 상태들이 서로 관련이 없는 경우 

▶ 컴포넌트 내에서 사용

const [state, setState] = useState(initialState);

 

useReducer 

▶ 복잡한 상태 관리

   ▷ 상태들이 서로 관련이 있거나, 참조가 필요한 경우

   ▷ ex) 로그인된 사용자의 권한을 확인하여 다른 화면에 보여줘야 하는 경우 

▶ 여러 컴포넌트에서 상태가 공유되야 하는 경우 

   ▷ Context API 사용 시 사용하는 것이 일반적

▶ reducer를 따로 선언하는 경우 

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

 

정리하면,

useState는 컴포넌트 내에서 관련 없는 상태를 관리하는 경우 사용한다. 

반면 useReducer는 좀 더 복잡한 상태를 관리하며, 여러 컴포넌트에서 사용되는 경우 사용한다. 

 

이것을 예시를 통해서 더 알아보자. 

useState

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count {count}</p>
      <button onClick={() => setCount(prev => prev+1)}>Increment</button>
      <button onClick={() => setCount(prev => prev-1)}>Decrement</button>
    </div>
  )
}

useState하면 많이 나오는 Count 예제이다.

여기서 useState는 count라는 상태를 가지고 있고, 컴포넌트 내에서만 상태를 관리할 때 사용한다. 

 

useReducer

const initialState = {
  products: [],
  categories: [],
  orders: [],
  user: null, 
  searchQuery: '',
  
  // ...
}

e-commerce를 예로 제품, 카테로기, 주문 정보, 사용자 정보, 쿼리 정보 등을 담아야 할 때, 사용했다. 

이것을 useState로 관리하지 않고, useReducer로 관리한 이유는 user를 기준으로 products, orders 등을 넣기 때문이다. 

 

const reducer = (state, action) => {
  switch(action.type) {
    case "SET_PRODUCTS": 
      return { ...state, products: action.payload };
    case "SET_CATEGORY":
      return { ...state, categories: action.payload };
      
    // ...
  }
}

 

지금까지 예시를 통해서 useState와 useReducer를 사용하는 경우를 알아봤다.

하지만 컴포넌트 내부에서는 useState만 사용해도 충분한 경우가 대부분이다. 

useReducer를 사용하는 것이 효율적인 경우는 

  ▶ 관리해야 하는 상태가 많은 경우,

  ▶ 상태들이 서로 관련이 있는 경우,

  ▶ 비즈니스 로직 분리하는 경우, 

  ▶ Immutability