리액트 개발의 신세계, useReducer로 상태 관리 마스터하기!

리액트로 개발을 하다 보면 상태 관리가 점점 복잡해지기 시작하죠. 그럴 때 등장하는 것이 바로 useReducer입니다.

지금부터 'useReducer'에 대해 알려드리도록 하겠습니다!

---

🚀 useReducer란?

useReducer는 리액트 훅 중 하나로, 상태 관리 로직이 복잡해질 때 유용하게 사용할 수 있어요. 주로 Redux와 비슷한 패턴을 따르며, 여러 개의 상태와 다양한 상태 업데이트 로직을 깔끔하게 관리할 수 있습니다.

🤚🏻Redux란

Redux는 자바스크립트 애플리케이션의 상태 관리를 위한 라이브러리입니다.
상태를 중앙 집중식으로 관리하여 애플리케이션의 상태를 더 예측 가능하고 일관성 있게 만들어줍니다.

주로 대규모 애플리케이션에서 상태 관리의 복잡성을 줄이기 위해 사용됩니다. 상태를 한 곳에서 관리함으로써, 애플리케이션의 상태 변경을 추적하고 디버깅하기 쉽게 만들어줍니다.

useReducer의 사용은 다음과 같습니다.

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

여기서 state는 현재 상태, dispatch는 상태를 업데이트하는 함수입니다. reducer는 상태 업데이트 로직을 정의하는 함수고, initialState는 초기 상태 값을 설정하는 데 사용됩니다.

 

🧐 reducer 함수의 사용 예시를 같이 볼게요!

reducer 함수는 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다. 다음과 같이 생겼어요:

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

increment: 액션의 타입이 increment인 경우, 현재 상태의 count 값을 1 증가시켜서 새로운 상태를 반환해요.

decrement: 액션의 타입이 decrement인 경우, 현재 상태의 count 값을 1 감소시켜서 새로운 상태를 반환해요.

기본값: 지정된 액션 타입이 없는 경우, 오류를 던져요.

 

📈 기본 사용법, 어렵지 않아요!

카운터 예제를 통해 useReducer를 사용하는 방법을 알아볼게요.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default Counter;

이 예제에서, state는 현재 카운터 값을 나타내고, dispatch는 액션을 보내 상태를 업데이트하는 함수입니다.

 

🔍 useState와 useReducer, 언제 사용해야 할까?

useState는 간단한 상태 관리에 적합하고, useReducer는 여러 상태를 복잡한 로직으로 관리해야 할 때 유용합니다. 다음 상황에서 useReducer를 고려해보세요:

1. 상태가 복잡할 때: 여러 개의 관련 상태를 관리해야 할 때.
2. 상태 업데이트 로직이 복잡할 때: 다양한 상태 전환 로직이 필요할 때.
3. Redux와 유사한 패턴이 필요할 때: 전역 상태 관리 없이 컴포넌트 내에서 비슷한 패턴을 사용하고 싶을 때.

---

이제 여러분도 useReducer 훅을 사용해 상태 관리를 더욱 효율적으로 할 수 있습니다. 복잡한 상태 관리가 필요할 때, 망설이지 말고 useReducer를 사용해보세요! 🚀