이번 글에서는 MobX를 사용하여 React 애플리케이션에서 언어 국제화(i18n)를 처리하는 방법에 대해 알아보겠습니다.

1. MobX와 언어 국제화(i18n)

MobX는 상태 관리 라이브러리로, React 애플리케이션에서 데이터의 상태를 쉽게 관리할 수 있도록 도와줍니다. 언어 국제화는 다국어를 지원하는 애플리케이션에서 현재 선택된 언어에 따라 다른 문구나 리소스를 렌더링하는 기능을 의미합니다.

2. i18n 상태 관리

MobX를 활용하여 언어 국제화를 처리하기 위해 먼저 i18n 상태를 관리할 MobX 스토어를 만들어야 합니다. 이 스토어에는 현재 선택된 언어와 관련된 데이터를 저장하고 관리할 수 있습니다.

import { observable, action } from "mobx";

class i18nStore {
  @observable currentLanguage = "ko";

  @action
  setCurrentLanguage(language) {
    this.currentLanguage = language;
  }
}

export default new i18nStore();

위의 코드에서는 MobX의 observable 데코레이터와 action 데코레이터를 사용하여 currentLanguage 상태를 관리하는 i18nStore 클래스를 정의하였습니다. setCurrentLanguage 액션 메소드를 통해 현재 선택된 언어를 변경할 수 있습니다.

3. i18n 데이터 관리

다국어 데이터를 관리하기 위해 별도의 파일을 생성하고, 이를 MobX 스토어에서 로드하여 사용할 수 있습니다. 예를 들어, i18nData.js 파일을 생성하고 다국어 데이터를 정의해보겠습니다.

const i18nData = {
  ko: {
    greeting: "안녕하세요!",
    goodbye: "안녕히 가세요!",
  },
  en: {
    greeting: "Hello!",
    goodbye: "Goodbye!",
  }
};

export default i18nData;

이제 i18nStore에서 i18nData를 로드하고 선택된 언어에 따라 해당 데이터를 반환하는 getter 메소드를 추가하여 사용할 수 있습니다.

import { computed } from "mobx";
import i18nData from "./i18nData";

class i18nStore {
  // ...

  @computed
  get currentLanguageData() {
    return i18nData[this.currentLanguage];
  }
}

위의 코드에서는 MobX의 computed 데코레이터를 사용하여 currentLanguageData getter 메소드를 정의하였습니다. 이 메소드는 현재 선택된 언어에 해당하는 다국어 데이터를 반환합니다.

4. 컴포넌트에서 i18n 사용

이제 MobX의 Provider 컴포넌트를 사용하여 i18n 스토어를 애플리케이션에 제공하고, 컴포넌트에서 다국어 데이터를 사용할 수 있습니다.

import React, { useContext } from "react";
import { observer } from "mobx-react";
import i18nStore from "./i18nStore";

const GreetingComponent = observer(() => {
  const { currentLanguageData } = useContext(i18nStore);

  return (
    <div>
      <h1>{currentLanguageData.greeting}</h1>
    </div>
  );
});

export default GreetingComponent;

위의 코드는 GreetingComponent라는 컴포넌트에서 MobX의 observer 함수를 사용하여 i18n 스토어를 관찰하고, currentLanguageData를 사용하여 현재 선택된 언어에 맞는 다국어 데이터를 렌더링하는 예시입니다.

마무리

이렇게 MobX를 활용하여 React 애플리케이션에서 언어 국제화(i18n)를 처리할 수 있습니다. MobX의 강력한 상태 관리 기능을 활용하여 언어 변경에 따른 화면 갱신을 효율적으로 처리할 수 있습니다. 더 많은 MobX 기능과 사용법을 알아보려면 MobX 공식 문서를 참고하시기 바랍니다.

#MobX #i18n