[typescript] MobX와 타입스크립트에서의 다국어 및 테마 전환 방식

21 Dec 2023

typescript

이번 글에서는 MobX와 타입스크립트를 사용하여 React 애플리케이션에서 다국어 및 테마를 적용하는 방법에 대해 알아보겠습니다.

MobX란?

몹엑스는 상태 관리 라이브러리 중 하나로, 간단하고 확장 가능한 방법으로 애플리케이션 상태를 관리할 수 있습니다. MobX를 이용하면 상태의 변화에 따라 자동으로 뷰가 업데이트되도록 구성할 수 있습니다.

타입스크립트에서 MobX 사용하기

MobX를 타입스크립트와 함께 사용하면 강력한 상태 관리와 타입 안정성을 동시에 얻을 수 있습니다.

// 예시: MobX Store 생성하기
import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

위 예시는 makeAutoObservable을 사용하여 MobX store를 만드는 방법을 보여줍니다.

다국어 지원 구현하기

i18n 라이브러리 선택

여러 다국어 라이브러리들 중 react-i18next와 i18next가 타입스크립트와 MobX와 잘 통합됩니다. 이 라이브러리를 사용하면 간편하게 다국어를 지원할 수 있습니다.

Store에 선호하는 언어 저장

MobX store에 사용자의 언어 설정과 같은 정보를 저장하여 전역에서 접근하도록 만듭니다.

// 예시: 다국어 스토어 생성하기
import { makeAutoObservable } from "mobx";

class LanguageStore {
  language = "en"; // Default language is English

  constructor() {
    makeAutoObservable(this);
  }

  setLanguage(newLanguage: string) {
    this.language = newLanguage;
  }
}

const languageStore = new LanguageStore();
export default languageStore;

다국어 컴포넌트 구현

각 컴포넌트에서 useObserver 를 통해 MobX store의 언어 설정을 감지하고 해당되는 다국어 텍스트를 렌더링합니다.

// 예시: 다국어 컴포넌트 구현하기
import { useObserver } from "mobx-react";
import languageStore from "./LanguageStore";

const GreetingComponent = () => {
  const { language } = languageStore;

  return useObserver(() => {
    return <div>{language === "en" ? "Hello" : "안녕하세요"}</div>;
  });
};

테마 전환 구현하기

테마 스토어 구현

테마를 저장하고 감지하기 위한 MobX store를 구현합니다.

// 예시: 테마 스토어 생성하기
import { makeAutoObservable } from "mobx";

class ThemeStore {
  theme = "light"; // Default theme is light

  constructor() {
    makeAutoObservable(this);
  }

  setTheme(newTheme: string) {
    this.theme = newTheme;
  }
}

const themeStore = new ThemeStore();
export default themeStore;

테마 적용

각 컴포넌트에서 테마 설정을 감지하고 해당 테마에 따라 스타일을 변경합니다.

// 예시: 테마 적용하기
import { useObserver } from "mobx-react";
import themeStore from "./ThemeStore";

const ThemedComponent = () => {
  const { theme } = themeStore;

  return useObserver(() => {
    return <div className={theme === "light" ? "light-theme" : "dark-theme"}>Content</div>;
  });
};

결론

MobX와 타입스크립트를 사용하여 React 애플리케이션에서 다국어 및 테마를 전환하는 방법에 대해 알아보았습니다. MobX를 활용하면 강력한 상태 관리와 타입 안정성을 확보하면서, 다국어 지원과 테마 전환을 쉽게 구현할 수 있습니다.

이상적으로, 다국어 및 테마 설정을 저장하는 MobX store를 만들고 컴포넌트에서 해당 store를 구독하여 변경 사항에 반응하도록 하는 것이 좋습니다. 이를 통해 각 컴포넌트들이 전역적인 설정을 쉽게 공유하고 관리할 수 있습니다.