MobX를 활용한 다국어 지원 방법

17 Oct 2023

mobx

다국어 지원은 현대의 응용 프로그램에서 중요한 요소입니다. 사용자들이 다양한 언어로 앱을 사용할 수 있도록 지원해야 합니다. 이를 위해 MobX를 사용하여 간단하고 효과적인 다국어 지원 기능을 구현할 수 있습니다.

MobX 소개

MobX는 JavaScript 애플리케이션에서 상태 관리를 위한 라이브러리입니다. 상태 변화에 따라 자동으로 관련된 컴포넌트를 업데이트하는 반응형 프로그래밍 아키텍처를 제공합니다. MobX는 React, Vue 및 Angular와 같은 프레임워크와 함께 사용하기에 이상적입니다.

다국어 지원을 위한 MobX 구성

다국어 스토어 생성: 다국어 데이터를 저장할 MobX 스토어를 생성합니다. 이 스토어는 선택한 언어에 해당하는 텍스트를 저장하고 감시합니다.

import { makeObservable, observable, action } from "mobx";

class LanguageStore {
  selectedLanguage = "en";

  text = {
    en: {
      greeting: "Hello!",
      farewell: "Goodbye!"
    },
    ko: {
      greeting: "안녕하세요!",
      farewell: "안녕히 가세요!"
    },
    jp: {
      greeting: "こんにちは!",
      farewell: "さようなら!"
    }
  };

  constructor() {
    makeObservable(this, {
      selectedLanguage: observable,
      setText: action
    });
  }

  setText(language) {
    this.selectedLanguage = language;
  }
}

export default new LanguageStore();

위의 코드에서는 LanguageStore라는 MobX 스토어를 생성하고, selectedLanguage과 text라는 observable 상태를 정의합니다. setText 액션을 통해 언어를 변경할 수 있습니다.

다국어를 사용하는 컴포넌트에 스토어 연결: 다국어 스토어를 컴포넌트에 연결하여 텍스트를 표시합니다. 컴포넌트는 MobX observer를 사용하여 상태 변경을 감지하고 자동으로 업데이트됩니다.

import { observer } from "mobx-react-lite";
import languageStore from "./languageStore";

const LanguageComponent = observer(() => {
  const { selectedLanguage, setText } = languageStore;

  const handleLanguageChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <select onChange={handleLanguageChange}>
        <option value="en">English</option>
        <option value="ko">한국어</option>
        <option value="jp">日本語</option>
      </select>
      <p>{languageStore.text[selectedLanguage].greeting}</p>
      <p>{languageStore.text[selectedLanguage].farewell}</p>
    </div>
  );
});

export default LanguageComponent;

위의 코드에서는 languageStore에서 selectedLanguage와 setText를 가져와서 언어 변경 이벤트를 처리하고, 선택한 언어에 해당하는 텍스트를 표시합니다.

다국어 스토어 사용하기: LanguageComponent를 앱의 적절한 위치에서 렌더링하여 사용합니다.
```
import LanguageComponent from "./LanguageComponent";

function App() {
  return (
    <div>
      <h1>다국어 지원 예제</h1>
      <LanguageComponent />
    </div>
  );
}

export default App;
```
위의 코드에서는 LanguageComponent를 화면에 표시합니다. LanguageComponent는 MobX 스토어와 연결되어 선택한 언어에 해당하는 텍스트를 보여줍니다.

결론

MobX를 활용하면 간단하고 효과적으로 다국어 지원 기능을 구현할 수 있습니다. MobX 상태 관리 라이브러리를 함께 사용하면 앱의 다국어 지원을 보다 쉽게 개발할 수 있습니다.

끝으로, 해당 내용을 더 자세히 알고 싶다면 MobX 공식 문서를 참고하시기 바랍니다.

정리: #MobX #다국어