[React] Hooks - useReducer

useReducer란 무엇인가?

React의 useReducer Hook은 상태(state) 관리를 위한 Hooks으로 복잡한 상태 로직을 처리하거나 여러 상태 값을 다뤄야 할 때 유용하다. useState와 비슷한 역할을 하지만 상태 업데이트 로직이 복잡해질수록 useReducer는 훨씬 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있게 해준다. 

useReducer는 리듀서 패턴에 따라 상태와 상태를 변경하는 함수(reducer)를 함께 관리하여 useState보다 더 복잡한 상태 변화를 효율적으로 처리할 수 있도록 설계되었다.

 

useState vs useReducer
useReducer와 useState는 모두 상태를 관리하는 데 사용되지만 사용 사례가 다를 수 있다.
useState: 간단한 상태 관리에 적합하다. 상태 변화가 단순하고 로직이 복잡하지 않을 때 사용한다.
useReducer: 여러 상태를 관리하거나 상태 변경 로직이 복잡할 때 유리하다. 특히 상태가 여러 값으로 이루어져 있고 다양한 액션에 따라 상태가 변할 때 사용한다.

useReducer 사용방법

const [state, dispatch] = useReducer(reducer, initialArg, init?)

 

• state: 현재 상태 값을 나타낸다.
• dispatch: 상태를 업데이트하기 위해 액션(action)을 전달하는 함수이다.
• reducer: 상태가 어떻게 업데이트되는지 지정하는 리듀서 함수이다. 순수해야 하고 상태와 동작을 인수로 받아야 하며 다음 상태를 반환해야 한다. (상태와 동작은 어떤 유형이든 가능하다.)
• initialArg: 초기 상태가 계산되는 값이다. 어떤 유형의 값이든 될 수 있고 초기 상태가 어떻게 계산되는지는 다음 init인수에 따라 달라진다.
• 선택 사항 init : 초기 상태를 반환해야 하는 초기화 함수이다. 지정되지 않으면 초기 상태가 "."으로 설정된다. initialArg. 그렇지 않으면 초기 상태가 .을 호출한 결과로 설정됩니다 init(initialArg). 

사용예시

 

• 리듀서 함수: reducer는 두 개의 인수인 state와 action을 받는다. action.type에 따라 상태를 변경하고 새로운 상태를 반환한다.
• dispatch: dispatch는 리듀서 함수로 액션을 전달하여 상태를 변경한다. dispatch({ type: 'increment' })는 상태를 증가시키는 동작을 수행한다.

 

import React, { useReducer } from 'react';

// 리듀서 함수: 현재 상태와 액션을 받아서 새로운 상태를 반환
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // useReducer를 사용하여 상태와 dispatch 함수 생성
  // reducer함수와 초기 값 count : 0
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      {/* dispatch 함수로 액션을 전달하여 상태를 변경 */}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

언제 useReducer를 사용해야 할까?

1. 복잡한 상태 로직: 상태가 여러 값으로 이루어져 있거나 복잡한 조건에 따라 상태가 변하는 경우
2. 하나의 상태에서 여러 동작이 필요한 경우: 상태를 업데이트할 때 다양한 액션을 처리해야 하는 경우
3. 로직을 컴포넌트 바깥으로 분리하고 싶은 경우: 리듀서 함수로 상태 변경 로직을 컴포넌트 외부로 분리할 수 있다.

참고문헌

useReducer – React