라이브러리 없이 typescript/reactHook 으로 다국어 지원하기

리액트 라이브러리 중 다국어를 지원하는 라이브러리는 물론 많지만,

간단한 랜딩 페이지 제작에서까지 라이브러리를 사용하기엔 뭔가 귀찮은 부분이 있다.

 

오늘은 간단하게 react hook 과 typescript만을 사용해서

 

자동완성 기깔나게 지원하는 다국어 지원 기능을 뚝딱 만들어보자

 

먼저, 예제에서 지원하는 언어셋은 한국어, 영어라고 가정하자

 

언어 타입을 만든다.

 

export type LanguageType = "ko" | "en";

 

언어셋을 담을 자바스크립트 파일도 하나 만든다.

 

/constants/lang.ts

const STRING_ESSETS = {
  MAIN_TITLE: {
    ko: "훅을 사용한 다국어 예제입니다.",
    en: "useMuiltilingual Example"
  },
  SUB_TITLE: {
    ko: "부제목입니당",
    en: "subTitle"
  }
};

export default STRING_ESSETS;

 

 

이제 key에 해당하는 string을 반환해줄 customHook을 만든다

 

hook은 간단하게 구성되어 있다.

 

훅 자체는 언어 타입을 인자로 받고,

STRING_ESSETS 의 key를 받아서 STRING_ESSETS 내에 있는 언어 key에 접근해서 return 하는 구조이다.

 

StringEssetType은 STRING_ESSETS의 정적 타이핑을 공고하게 하기 위해 추가한 타입인데 없어도 상관은 없다.

 

import STRING_ESSETS from "../constants/lang";

export type LanguageType = "ko" | "en";

export type StringEssetType = Record<string, Record<LanguageType, string>>;

export default function useMultilingual(lang: LanguageType) {
  return (key: keyof typeof STRING_ESSETS) => {
    return STRING_ESSETS[key][lang];
  };
}

 

type 선언은 훅과 함께 해도 되고, 바깥으로 빼서 해도 된다.

 

언어의 상태관리가 redux 혹은 recoil 등의 상태관리 라이브러리와 함께 쓰인다면 외부로 빼는게 좋을 것 같다.

 

사용은 다음과 같이 쉽게 가능하다.

 

  const [lang, setLang] = useState<LanguageType>("ko");

  const m = useMultilingual(lang);
  
  //* ---- JSX ---- *//
  
  <h1>{m("MAIN_TITLE")}</h1>
  <h2>{m("SUB_TITLE")}</h2>

  //* ---- JSX ---- *//

 

기본적으로 타이핑이 되어있어 자동완성이 쉽게 지원되고,
STRING_ESSETS의 언어셋 중 누락되거나 한 부분이 있으면 타입 검증등으로 체크가 되어 편리했다.

 

다국어 지원을 위해 복잡한 라이브러리 등을 사용하는게 망설여졌다면 간단한 훅으로 추가해보는건 어떨까.