전역 상태 관리는 대규모 애플리케이션 개발에서 중요한 부분입니다. 상태 관리 라이브러리를 사용하면 전역 상태를 효율적으로 관리할 수 있지만, 때로는 라이브러리에 의존하기보단 간단한 방법으로 전역 상태를 관리하는 것이 유리할 수 있습니다.

이번 글에서는 Custom Hook을 이용하여 간단한 전역 상태 관리를 어떻게 구현할 수 있는지 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 상태 로직을 재사용하기 위한 기능입니다. 기존의 상태 로직을 Hook으로 추상화하여 컴포넌트에서 간단하게 사용할 수 있도록 도와줍니다. Custom Hook은 보통 “use”로 시작하는 이름을 가지고 있습니다.

전역 상태 관리를 위한 Custom Hook 생성

우선, 전역 상태를 관리하기 위한 Custom Hook을 만들어 보겠습니다. 이 예제에서는 useGlobalState라는 Custom Hook을 생성하겠습니다.

import { useState } from 'react';

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

  const updateState = (updatedState) => {
    setState(updatedState);
  };

  return [state, updateState];
};

export default useGlobalState;

이 Custom Hook은 상태를 저장하고 업데이트하는 데 필요한 기능을 제공합니다. useState를 통해 상태를 관리하고, updateState 함수를 통해 상태를 업데이트합니다.

Custom Hook 사용하기

이제 useGlobalState Custom Hook을 사용하여 전역 상태를 관리하는 예제를 만들어 보겠습니다.

import useGlobalState from './useGlobalState';

const App = () => {
  const [count, setCount] = useGlobalState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>전역 상태 관리 예제</h1>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>증가</button>
    </div>
  );
};

export default App;

위의 예제에서는 useGlobalState Custom Hook을 이용하여 count라는 전역 상태를 생성하고, setCount 함수로 상태를 업데이트합니다. incrementCount 함수를 통해 count를 증가시키는 동작을 수행하고, 이를 클릭 이벤트에 연결합니다.

결론

Custom Hook을 이용하여 간단한 전역 상태 관리를 구현하는 방법을 살펴보았습니다. Custom Hook은 React의 강력한 기능 중 하나로, 상태 로직을 재사용할 수 있도록 도와줍니다. 이를 이용하여 전역 상태를 효율적으로 관리할 수 있습니다. 추가적으로 Redux, MobX 등의 상태 관리 라이브러리를 사용할 수도 있지만, 간단한 애플리케이션의 경우 Custom Hook을 사용하는 것이 더 간편하고 가벼울 수 있습니다.

#React #상태관리