React Hook : useReducer()

useReducer()는 React Hooks 중 하나로, 상태 관리를 위해 사용되는 함수입니다. 이 함수는 useState()보다 더 복잡한 상태 관리를 할 때 유용합니다.

useReducer()는 reducer 함수와 초기 상태(initial state)를 받아, 상태를 업데이트하는 dispatch 함수와 현재 상태(current state)를 반환합니다.

reducer 함수는 이전 상태와 액션(action)을 받아 새로운 상태를 반환하는 순수 함수(pure function)입니다. 이전 상태는 변경되지 않으며, 액션 객체에 따라 다른 상태를 반환합니다.

액션 객체는 type 속성과 함께 전달됩니다. type 속성은 상태를 어떻게 업데이트할지 나타내는 문자열입니다.

아래는 useReducer()를 사용하여 간단한 카운터 예제를 만든 코드입니다.

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:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

export default Counter;

위 코드에서 reducer 함수는 switch 문으로 구현되어 있습니다. action.type이 'increment'인 경우 state.count를 1 증가시키고, 'decrement'인 경우 1 감소시킵니다. 그 외의 경우에는 에러를 발생시킵니다.

Counter 컴포넌트에서는 useReducer()를 사용하여 state와 dispatch를 받습니다. 초기 상태는 { count: 0 }입니다. 그리고 버튼 클릭 이벤트에서 dispatch() 함수를 호출하며, 액션 객체를 전달합니다. 이전 상태와 액션 객체를 reducer 함수에 전달하여 새로운 상태를 반환받습니다. 반환된 상태는 state에 저장되어 렌더링됩니다.

이와 같이 useReducer()를 사용하면 복잡한 상태 관리를 보다 효율적으로 처리할 수 있습니다. 또한 reducer 함수는 순수 함수이므로 테스트 및 디버깅에 용이합니다.

그럼 Redux는 이제 버리는건가? 아니 그럼 여태 내가 배운거는 물거품? 시간낭비?

useReducer()와 Redux는 상태 관리를 위한 두 가지 서로 다른 방법입니다.

useReducer()는 React Hooks 중 하나로, React 내부에 내장되어 있습니다. 반면에 Redux는 React와 별개의 라이브러리입니다.

useReducer()를 사용하면 React 컴포넌트의 상태를 간단하게 관리할 수 있습니다. 그러나 상태가 복잡해질수록 코드가 길어지고 유지보수가 어려워질 수 있습니다. 이 때문에 Redux를 사용하면 복잡한 상태 관리를 보다 쉽게 처리할 수 있습니다.

Redux는 단일 스토어(single store) 패턴을 따르며, 모든 상태를 하나의 객체로 관리합니다. 애플리케이션의 상태를 관리하기 위해 action과 reducer를 사용합니다. 이러한 작업을 통해 복잡한 상태 관리를 보다 쉽게 처리할 수 있습니다.

Redux는 복잡한 애플리케이션에서 사용하기 좋습니다. 여러 컴포넌트 간의 상태 공유가 필요하거나, 비동기 데이터를 처리해야 하는 경우 Redux는 매우 유용합니다. 그러나 Redux를 사용하면 코드의 양이 증가하고, 상태를 변경하기 위해 많은 양의 코드를 작성해야 합니다.

뭘 선택해야 될지가 고민인 분들을 위한 한줄평!

따라서 useReducer()는 상대적으로 작은 규모의 프로젝트나 간단한 상태 관리를 위해 사용하고, Redux는 복잡한 애플리케이션에서 사용하는 것이 적절합니다.

내저장소 바로가기 luxury515