[React] 국제화(internationalization, i18n) 라이브러리 비교

React에서 사용할 수 있는 국제화(internalization, 이하 i18n) 라이브러리는 두 종류가 있습니다.

• react-intl
• react-i18next
  • Next.js지원을 강화한 next-i18next

결론부터 말하자면 다음과 같습니다.

1. Next.js와 Server Side Rendering(SSR)을 사용해야 한다면 next-i18next
2. Next.js의 Static Site Generation(SSG)을 사용해야 한다면 react-i18next

• SSR이 필요해질 경우 next-i18next로 갈아타기 편리하기 때문

3. Next.js를 사용하지 않는다면 react-intl

인지도 link

toc

지표를 보면 알겠지만 둘 다 널리 사랑받는 라이브러리라 대중의 검증은 끝났다고 봐도 됩니다.

API link

toc

react-intl link

toc

import React from 'react';
import {useIntl, FormattedDate} from 'react-intl';

const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => {
  const intl = useIntl();
  return (
    <span title={intl.formatDate(date)}>
      <FormattedDate value={date} />
    </span>
  );
};

export default FunctionComponent;

react-intl은 번역뿐만 아니라 숫자, 날짜등의 formatting까지 지원합니다.

react-i18next link

toc

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p>{t('my translated text')}</p>
}

react-i18next은 번역에만 충실합니다.

Server Side Rendering (SSR) link

toc

react-intl은 SSR에 대해 라이브러리 수준에서 특별한 고려는 하지 않았습니다.

react-i18next의 경우 SSR이 필요한 경우 Next.js와 함께 next-i18next을 사용하라고 공식 문서에서 권장합니다.

결론 link

toc

Next.js를 사용하지 않는다면 react-intl을, Next.js를 사용하면서 SSR이 필요하면 next-i18next를, Next.js를 사용하면서 SSG가 필요하면 react-i18next를 사용하면 되겠습니다.

Next.js의 SSG가 필요한 상황에서는 사실 둘 중 아무거나 사용해도 됩니다. 그러나 SSR이 필요해졌을 때 react-i18next를 사용하고 있었다면 next-i18next의 전환이 훨씬 간편하므로 Next.js를 사용한다면 react-i18next를 추천합니다.

https://github.com/lukeed/rosetta

292 byte밖에 차지하지 않는 i18n 라이브러리 등장.