i18n 새로고침 시 default 언어로 돌아가는 현상 해결

문제 상황

담당한 페이지에 i18n을 모두 적용하고 나서 사용 플로우를 확인하는 과정에서
새로고침을 하면 default로 지정된 언어로 돌아가는 현상을 발견했다.

시도한 방법

맨 처음 환영 화면(Entry)에서 외국인 관람객을 위한 언어 선택을 selector로 입력 받았는데, 이때 선택된 언어를 로컬스토리지에 저장했다.

이후 페이지마다 useEffect로 로컬스토리지의 언어와 i18n의 언어(현재 화면의 언어)가 다르면 로컬스토리지의 언어로 교체해주었다.

  useEffect(() => {
    const savedLanguage = localStorage.getItem("language") || "en";

    if (i18n.language !== savedLanguage) {
      i18n.changeLanguage(savedLanguage);
    }
  });

하지만 이 방법은 두 가지 문제가 있었다.

• 적용이 됐다 안 됐다 했다. (어제 작업했을 때는 잘 됐는데 오늘 갑자기 같은 코드인데도 안 되는(?) 이건 로컬스토리지를 사용하다 보면 가끔 발생하는 문제)
• 새로고침을 하면 화면에 다국어를 다시 적용하는 과정에서 화면 깜박임이 있는 문제
  • 렌더링 후에 부가적으로 동작하는 useEffect의 특성 때문인 것 같았다.
    잠깐이지만 사용성에서 스무스하다고 느껴지지 않았다.

해결

i18n 폴더에 hooks 폴더를 만들고 Chat GPT의 도움을 받아 다음과 같이 코드를 추가했다.

• 로컬스토리지 관련
• i18n 설정

import i18n from "i18next";

type LanguageType = "ko" | "en" | "zh-chs" | "ja"; // 한, 영, 중, 일 총 4가지 언어 사용

// 로컬스토리지에 저장하기
export const saveLanguageToStorage = (language: string) => {
  localStorage.setItem("language", language);
};

// 로컬스토리지에서 받아오기
export const getLanguageFromStorage = (): LanguageType | null => {
  return localStorage.getItem("language") as LanguageType | null;
};

// i18n으로 적용될 다국어 설정 (default 언어는 영어, default 언어가 없으면 로컬스토리지의 언어 사용)
const initialLanguage: LanguageType = getLanguageFromStorage() || "en";

// 이 부분은 잘 모르겠지만 프로젝트 상의 i18n 패키지 설정 자체를 바꿔주는 곳인 듯 하다.
i18n.init({
  lng: initialLanguage, // default 언어 또는 로컬스토리지의 언어로 설정
});

결과

• 위 파일 하나만 만들었는데 새로고침 시 default 언어로 돌아가는 이슈가 말끔히 해결되었다 👏👏
• 각 페이지마다 useEffect를 넣어주지 않아도 잘 작동했다.
  • 아마 상위 레벨에 있는 i18n 패키지의 설정을 직접 바꿔줘서 그런 것 같다.
• 화면 깜박임도 완전히 사라졌다.
  • UI에 영향을 주는 로직은 렌더링 후에 동작하는 useEffect보다 이렇게 아예 상위 설정 커스텀을 변경하는 방법이 더 좋은 것 같다.
  • 파일이 따로 있으니 로컬스토리지 사용도 이 상위 파일에서 처리하면 되어서 편했다.