구글 스프레드시트를 통한 다국어 번역 자동화하기 -2

i18next react에서 사용하기

 

1탄에서 열심히 json 파일 자동화 시켰으니까 이제 사용하는 프로젝트에 연동하면 됩니다.

기본 골자는 아래와 같습니다.

 

1. i18n.js 파일 만들기

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
// LanguageDetector 는 다양한 방법으로 사용자 pc에서 기본 언어를 감지해 설정한다
// 자세한 내용은 아래에 후술하겠음

import translationEN from "../locale/en/en.json";
import translationKO from "../locale/ko/ko.json";
// 위처럼 그냥 json 가져와도 잘 읽힌다

const resources = {
  en: {
    translation: translationEN,
  },
  ko: {
    translation: translationKO,
  },
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "ko", // 번역 파일에서 찾을 수 없는 경우 기본 언어
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

 

2.최상위 파일에서 i18n.js 빌드하기

import React from 'react'
import App from './App.jsx'
import "./locale/i18n.js" // 최상위 파일에서 build 해준다

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

3. 다국어 지원을 할 컴포넌트에서 사용

import { useTranslation } from "react-i18next";

export default function I18nTest() {
  const { t, i18n } = useTranslation();

  // 언어 변경하기
  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang); 
  };

  return (
    <div>
      <div>
        <button onClick={() => changeLanguage("ko")}>한국어</button>
        <button onClick={() => changeLanguage("en")}>English</button>
      </div>
      <h1>{t(`auto-translation`)}</h1> // json 파일에 설정했던 key 값으로 불러온다
      <div>{t(`new-jeans`)}</div> // json 파일에 설정했던 key 값으로 불러온다
    </div>
  )
}

 

 

 

i18next 파헤치기: 생각보다 엄청 똑똑한 라이브러리였다

이번에 i18next를 조금 더 딥하게 공부하면서 "와, 이 라이브러리 진짜 잘 만들었네"라고 감탄한 부분들이 있어서 공유해보려고 합니다. 사실 예전에는 그냥 다국어 처리용 라이브러리 정도로만 생각했는데, 뜯어보니 그들만의 디테일이 있었습니다

 

언어 감지의 5단 콤보

i18next-browser-languagedetector라는 패키지가 있는데, 이게 정말 똑똑하게 사용자 언어를 알아냅니다.

1. URL 쿼리로 바로 변경: ?lng=en 이렇게 주소창에 치면 즉시 영어로!
2. 로컬스토리지: 내가 마지막에 선택한 언어를 기억해뒀다가 다음에 접속하면 그 언어로
3. 쿠키: 브라우저가 바뀌어도 언어 설정 유지
4. 세션스토리지: 이번 세션에서만 임시로 언어 설정
5. 브라우저 기본 언어: 내 컴퓨터 언어 설정을 자동으로 읽어옴

특히 i18n.changeLanguage()로 언어를 바꾸면 자동으로 localStorage에 저장해서, 다음에 사이트 들어와도 내가 마지막에 선택한 언어가 그대로 나옵니다. 전 이런 디테일이 좋네요

참고로 Electron으로 개발할 때는 브라우저랑 조금 달라서 이 기능이 완벽하게 작동 안 해서 따로 구현했었는데... 그때 뭐야 왜 안돼 하면서 디버깅할 때 생각이 나네요 😅

 

useTranslation 훅의 마법

언어가 바뀔 때마다 컴포넌트가 어떻게 자동으로 리렌더링 되는지 궁금해서 소스코드를 뜯어봤습니다.

 

내부 동작 원리

useTranslation 안에 아래 useState로 상태관리를 해주고 있었고
const [t, setT] = react.useState(getT);

ns(언어) 가 변경되는걸 트리거로 useEffect 에서 setter 함수로 state 변경해서 랜더링 해주고 있었다.

react.useEffect(() => {
  // 생략

  // 이전 ns 과 현재 ns 가 다른 경우에 setter 해주고 있음
  if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
    setT(getNewT); 
  }

  // 생략
}, [i18n, joinedNS]); // ns 로 트리거

 

docs 도 깔끔하고 커스텀해서 사용하기도 좋고 왜 많이 쓰는지 다시한번 납득할수 있었습니다🙂‍↕️