MobX는 React 애플리케이션의 상태 관리를 도와주는 강력한 라이브러리입니다. 이번 포스트에서는 MobX를 사용하여 커스텀 훅을 개발하는 방법에 대해 알아보겠습니다.

MobX란?

MobX는 단방향 데이터 플로우를 구현하기 위한 상태 관리 라이브러리로, 쉽고 간단한 API를 제공하여 애플리케이션의 상태 변화를 추적하고 관리할 수 있습니다. MobX의 핵심 원칙은 observable, action, reaction으로 이루어져 있습니다.

• observable: 상태를 감시하고 변화를 추적하는 객체를 생성합니다.
• action: 상태를 변경하는 함수를 정의합니다.
• reaction: 상태 변화에 반응하여 원하는 동작을 수행하는 함수를 정의합니다.

커스텀 훅 작성하기

커스텀 훅은 React 컴포넌트에서 반복되는 로직을 재사용하기 위해 사용됩니다. MobX를 통해 상태 관리를 할 수 있는 커스텀 훅을 작성해보겠습니다.

import { observable, action } from 'mobx';
import { useObserver } from 'mobx-react';

function useCustomHook() {
  const data = observable({
    count: 0,
  });

  const increment = action(() => {
    data.count += 1;
  });

  const decrement = action(() => {
    data.count -= 1;
  });

  return useObserver(() => (
    <div>
      <p>Count: {data.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  ));
}

export default useCustomHook;

위의 예시에서는 observable 함수로 count라는 상태를 관리할 수 있는 객체를 생성합니다. 이후, action 함수를 사용하여 increment와 decrement 함수를 정의합니다. 이 함수들은 count의 값을 증가시키거나 감소시킵니다.

마지막으로, 커스텀 훅을 반환할 때 useObserver 함수를 사용하여 컴포넌트를 감싸줍니다. 이렇게 커스텀 훅을 사용하면 컴포넌트에서 해당 상태를 간편하게 사용할 수 있습니다.

사용 방법

이제 작성한 커스텀 훅을 사용해보겠습니다.

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

function App() {
  const Counter = useCustomHook();

  return (
    <div>
      <h1>Custom Hook Example</h1>
      {Counter}
    </div>
  );
}

export default App;

위의 예시에서는 useCustomHook을 호출하여 반환된 커스텀 훅을 Counter 변수에 할당합니다. 그리고 컴포넌트에서 Counter를 렌더링합니다.

마무리

이번 포스트에서는 MobX를 사용하여 커스텀 훅을 개발하는 방법에 대해 알아보았습니다. MobX는 간편한 API를 제공하여 상태 관리를 용이하게 해주므로, React 애플리케이션에서 활용하면 매우 유용합니다. 추가적인 자세한 사항은 MobX 공식문서를 참고해주세요.