Intl API

Yuzu·2023년 2월 21일

국제화(internalization): 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정

Intl API는 전역에서 접근이 가능한 Intl 객체를 통해 사용이 가능하며, 이 Intl 객체는 여러 개의 생성자로 구성되어 있다.
모든 생성자는 공통적으로 2개의 인자를 받는다. 첫번째 인자는 소위 로케일(locale)이라고 일컽는 언어와 지역 정보를 표준화 시킨 코드이며, 두번째 인자는 추가적인 포멧팅 옵션을 명시할 수 있는 객체다.
생성자는 실제로 포멧팅을 수행할 수 있는 포멧터(formatter) 객체를 반환하며, 이 포멧터에서 제공하는 format()과 같은 함수에 국제화가 필요한 데이터를 인자로 넘기면 해당 언어/지역에 맞는 형식을 적용해준다.

ex) new Intl.DateTimeFormat("ko", {dateStyle: "long"}).format(new Date()) // 현재 날짜를 한국식으로 변경

$ npm i react-intl

locale: 사용자의 언어/지역 정보를 플랫폼이나 프로그래밍 언어에 구애받지 않고 사용할 수 있도록 표준화 시킨 코드 (2자리로 언어를 표시, 선택적으로 여기에 2자리를 더해 지역까지 표시)
다국어 지원은 일반적으로 애플리케이션의 전역에서 일어남
React Intl 라이브러리는 내부적으로 intl이라는 객체를 이용해서 메시지를 포멧팅하는데 따라서 반드시 컴포넌트로 애플리케이션의 최상위 컴포넌트를 감싸서 intl 객체가 모든 하위 컴포넌트에서 접근 가능하도록 만들어줘야 한다.
prop으로는 locale에 사용자의 지역/언어에 해당하는 locale 코드를 messages에는 이 locale 코드에 해당하는 메시지 데이터를 넘긴다.
IntlProvider 컴포넌트를 통해 애플리케이션 최상위에서 사용자의 언어/지역(locale) 코드와 메시지 데이터를 설정해주면, < FormattedMessage /> 컴포넌트 또는 intl.formatMessage() 함수를 통해서 해당 언어/지역에 부합하는 메시지를 화면에 보여줄 수 있다.

냐하