i18n 뭘 써야 좋을까..

i18n === 국제화

출판물 또는 하드웨어 소프트웨어 등의 제품을 언이 및 문화권 등이 다른 여러 환경에서도 사용 할 수 있도록 프로덕트를 설계하는 것을 의미한다.

i nternationalizatio n
가장 첫 문자인 I와 마지막인 N 사이에 18개의 문자가 있다고 해서 i18n이라 한다.

l10n for localization
g11n for globalization

React Internationalization i18n 라이브러리 비교

라이브러리	weekly download	size	특이사항
react-intl	885,128	248kb	숫자, 날짜등의 formatting 도 지원
react-i18next	1,199,982	347kb	SSR을 사용한디면 next.js 와 next-i18next을 사용하라고 공식 문서에서 권장

출처: NpmTrends

2021-11-29 기준

react-i18n 사용 예시

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;

Conclusion

비교한 두개의 라이브러리는 현재 가장 많이 사용중인 i18n관련 라이브러리이며, 프로젝트가 SSR 지원의 유무에 따라 맞는거로 사용하면 좋을 듯 하다.

https://www.daleseo.com/react-intl/