useReducer를 활용한 Custom Hook 구현

06 Nov 2023

reactjs

React에서는 상태 관리를 위해 useState 훅을 제공합니다. 하지만 복잡한 상태 변화나 여러 개의 상태를 한꺼번에 관리하기 위해서는 다른 방법이 필요합니다. 이런 경우에 useReducer 훅을 활용하면 상태 관리를 더 효율적으로 할 수 있습니다.

useReducer는 Redux에서 영감을 받아 개발된 훅으로, 리듀서 함수와 초기 상태 값을 입력으로 받아 현재 상태와 업데이트 함수를 반환합니다. 리듀서 함수는 현재 상태와 액션 객체를 입력받아 새로운 상태를 반환하는 함수입니다.

Custom Hook 구현

아래는 useReducer를 활용하여 Custom Hook을 구현하는 예시입니다.

import { useReducer } from 'react';

// 초기 상태
const initialState = {
  count: 0,
  loading: false,
};

// 리듀서 함수
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'toggleLoading':
      return { ...state, loading: !state.loading };
    default:
      throw new Error(`Unknown action type: ${action.type}`);
  }
};

// Custom Hook
const useCustomHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({ type: 'increment' });
  };

  const decrement = () => {
    dispatch({ type: 'decrement' });
  };

  const toggleLoading = () => {
    dispatch({ type: 'toggleLoading' });
  };

  return {
    count: state.count,
    loading: state.loading,
    increment,
    decrement,
    toggleLoading,
  };
};

export default useCustomHook;

위의 예시에서는 초기 상태 initialState와 리듀서 함수 reducer를 정의합니다. 그리고 이를 이용하여 useReducer 훅을 호출하여 현재 상태 state와 디스패치 함수 dispatch를 받습니다.

useCustomHook 함수에서는 increment, decrement, toggleLoading 등의 업데이트 함수와 함께 현재 상태를 반환하도록 정의되어 있습니다. 이렇게 하면 이 Custom Hook을 사용하는 컴포넌트에서는 상태와 업데이트 함수를 간편하게 사용할 수 있습니다.

사용 예시

이제 이 Custom Hook을 사용하는 예시를 살펴보겠습니다.

import React from 'react';
import useCustomHook from './useCustomHook';

const ExampleComponent = () => {
  const { count, loading, increment, decrement, toggleLoading } = useCustomHook();

  return (
    <div>
      <p>Count: {count}</p>
      <p>Loading: {loading ? 'True' : 'False'}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={toggleLoading}>Toggle Loading</button>
    </div>
  );
};

export default ExampleComponent;

위의 예시에서는 useCustomHook을 호출하여 현재 상태와 업데이트 함수들을 받아옵니다. 그리고 이를 JSX 코드 안에서 사용하여 화면에 렌더링합니다. 버튼을 클릭하면 해당 업데이트 함수가 호출되어 상태가 변경되는 것을 확인할 수 있습니다.

결론

useReducer를 활용한 Custom Hook을 구현하면 상태 관리를 더욱 효율적으로 할 수 있습니다. 복잡한 상태 변화를 다루거나 여러 개의 상태를 관리해야 하는 경우에는 useReducer를 고려해보세요. 또한, Custom Hook을 사용하면 컴포넌트의 코드를 더욱 깔끔하고 재사용 가능하게 만들 수 있습니다.

#React #CustomHook