[React | 다국어 지원] i18n이란? react-i18next(리액트 다국어 지원 라이브러리)

i18n이란 internationalization(국제화) 라는 단어를 축약한 것이다. 

i부터 n까지 18개의 문자수를 축약해서 i18n으로 나타낸다. 국제화는 다양한 언어 및 지역에 적용할 수 있도록 프로그램을 설계하는 프로세스이다. 이상적으로는 국제화는 설계의 기본 단계 중 하나이다. 

 

• 현지화, 국제적인 배포에 대한 장벽을 제거하는 방식으로 설계 및 개발
  • Unicode 사용
  • 필요에 따라 적절하게 레거시한 문자 인코딩을 처리
  • 문자열 연결에 신경쓰는 것
  • 유저 인터페이스의 문자열 값에 의존하지 않는 것
• 현지화가 이루어질 때까지 사용할 수 없는 기능을 지원
  • 양방향 텍스트를 지원
  • 언어를 식별하기 위해 DTD(document type definition)에 마크업을 추가
  • 세로 텍스트나 기타 라틴어 이외의 인쇄 기능에 대한 CSS지원 추가 
• 코드가 지역, 언어 또는 문화적으로 적절하게 지원
  • 현지화 데이터
  • 날짜 및 시간 형식
  • 달력
  • 숫자 형식 및 숫자 시스템
  • 정렬 방식 및 표시
  • 이름 
  • 주소 형식 처리 등
• 소스코드와 콘텐츠에서 현지화 가능한 요소를 분리하여 지역에 따라 현지화된 대체적인 요소를 로드하거나 선택

-> 일반적으로 i18n 은 웹 개발에서 '텍스트 번역'을 의미한다. 

 

https://phrase.com/blog/posts/react-i18n-best-libraries/

The Best React Libraries for Internationalization

> 리액트에서 사용하기 좋은 i18n 라이브러리를 소개하는 사이트이다.

그 중에서도 react-i18next 가 가장 많이 사용되는 라이브러리인 거 같아 찾아왔다. i18next는 여러 프레임워크를 지원하고 있으며 나는 그 중에서도 리액트를 사용하기 때문에 react-i18next를 설치하여 사용)

https://react.i18next.com/getting-started

Getting started - react-i18next documentation

• react-i18next 의 경우에, 기본 번들러 세팅으로 webpack과 rollup을 지원하고 있으므로 CRA(webpack), Vite(rollup)를 쓰면 편리하게 이용할 수 있을 거 같다.
• 안드로이드 스튜디오의 경우는 i18n을 기본 제공하고있는데 나는 웹으로 모바일 뷰를 만들어야 하므로 안타깝게도 사용하지 못한다. 

react-i18next는 4가지 방법으로 i18n을 제공한다

1. useTranslation(hook) // 가장 직관적이다. 
2. withTranslation (HOC) 
3. Translation (render props)
4. Trans Component 

+ 외에도 변수를 받아 처리하는 방법도 제공하고 있다. 

유저의 입력을 받아 지원해야하는 상황

 

현재로써는 json 파일로만 관리하는 것이 최선인 거 같은데 능력이 닿는다면 자동화하는 방법도 있다. 

https://meetup.nhncloud.com/posts/295

국제화(i18n) 자동화 가이드 : NHN Cloud Meetup

 

참고 ref:

https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%80%EB%A1%9C%EB%B2%8C%ED%95%9C-%EC%9B%B9%EC%9D%84-%ED%96%A5%ED%95%98%EC%97%AC-react-i18n-%EB%8B%A4%EA%B5%AD%EC%96%B4%EC%A7%80%EC%9B%90

[리액트] 글로벌한 웹을 향하여 (react-i18next, 다국어지원)