20241003 TIL: 다국어 처리 지원하기 [진행중]

✅ 오늘 배운 것

어제 발생했던 이슈를 처리하고 이제 남은 다국어 처리를 마저 진행해보자. 어제 참고한 블로그와 비슷한 방식으로 .json 파일을 작성한 다음 react-i18next의 useTranslation 훅을 가져와서 사용했는데, 다음과 같은 에러가 났다. 

 

i18next 인스턴스를 init한 다음에 사용되는 방법이 잘못된 것 같았다. 그래서 이번에는 /locales/index.js 파일에서 export한 i18n 객체를 import해서 위의 코드의 인자로 넣어주려고 했다. 즉 이전 코드가 다음과 같다면,

import { useTranslation } from 'react-i18next';

const Login = () => {
  const { t } = useTranslation();
  ...

 

이 코드를 다음과 같이 바꿔주려고 했다. 

import i18n from '@/locales/index';
import { useTranslation } from 'react-i18next';

const Login = () => {
  const { t } = useTranslation(i18n);
  ...

 

그랬더니 이번엔 다른 에러가 났다. 

 

npm install로 설치한 'react-native-localize' 라이브러리에서 오류가 나는 것으로 보였다. 그런데 공식문서를 참고해도 그냥 npm install을 하고 사용을 하면 된다고만 나와있어서, 에러가 어디서 났는지 갈피가 잡히지 않았다. 아니면 어제 마주한 것처럼 또 캐시 관련 오류인 걸까?

 

문득 여러 다국어 라이브러리들을 설치하고 사전 조치들을 안 해서 나는 에러인가 싶어서 react-native-i18n의 공식문서도 찾아보았다. 그랬더니 android/ios별로 추가적으로 실행해야 하는 작업이 있다고 나와있었다.