React Intl을 사용하여 React 애플리케이션을 국제화하는 방법
React Intl은 리액트 애플리케이션의 국제화를 지원하는 데 필수적인 라이브러리입니다. 다양한 컴포넌트와 유틸리티를 제공하여 애플리케이션이 여러 언어와 문화적 배경에 적합하도록 돕습니다. 국제화, 또는 i18n으로 불리는 이 과정은 단순히 번역을 넘어서, 다양한 사용자 경험을 고려하는 것을 의미합니다.
ReactIntl을 활용하면 React 애플리케이션이 다양한 언어 및 지역 설정을 원활하게 지원할 수 있습니다.
React Intl 설치
React Intl 라이브러리를 프로젝트에 추가하기 위해서는 먼저 설치해야 합니다. npm, yarn, 또는 pnpm과 같은 패키지 관리자를 사용하여 손쉽게 설치할 수 있습니다.
npm을 사용한 설치는 터미널에서 다음 명령어를 실행함으로써 가능합니다:
npm install react-intl
yarn을 통한 설치는 아래 명령어로 이루어집니다:
yarn add react-intl
React Intl 라이브러리 사용법
라이브러리가 설치되면, React 애플리케이션 내에서 다양한 기능들을 활용할 수 있습니다. React Intl은 JavaScript Intl API와 유사한 기능을 제공합니다.
라이브러리에서 제공하는 중요한 컴포넌트 중 일부는 `FormattedMessage`와 `IntlProvider`입니다.
`FormattedMessage` 컴포넌트는 애플리케이션 내에서 번역된 문자열을 표시하는 역할을 하며, `IntlProvider` 컴포넌트는 애플리케이션 전체에 번역 및 형식 설정 정보를 제공합니다.
번역을 적용하기 위해서는 먼저 번역 파일을 생성해야 합니다. 이 파일에는 애플리케이션에서 사용되는 모든 번역 데이터가 포함됩니다. 각 언어나 지역 설정별로 별도의 파일을 만들거나, 하나의 파일에 모든 번역을 모아 관리할 수 있습니다.
아래는 예시입니다:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
이 예시 번역 파일에는 프랑스어(`messagesInFrench`)와 이탈리아어(`messagesInItalian`)에 대한 번역 객체가 포함되어 있습니다. `{name}`과 같은 자리 표시자는 런타임 시 동적으로 대체될 수 있습니다.
애플리케이션에서 번역을 사용하기 위해서는 최상위 컴포넌트를 `IntlProvider`로 감싸야 합니다. `IntlProvider`는 `locale`, `defaultLocale`, 그리고 `messages`라는 세 가지 중요한 props를 받습니다.
`locale` prop은 사용자의 지역 설정을 문자열로 지정하고, `defaultLocale`은 사용자의 설정이 없을 경우 기본으로 사용될 언어를 지정합니다. 마지막으로 `messages` prop은 번역 객체를 전달받습니다.
다음은 `IntlProvider` 사용 예시입니다:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
<App />
</IntlProvider>
</React.StrictMode>
);
위 예시에서는 프랑스어 로케일(`fr`), 프랑스어 번역(`messagesInFrench`), 그리고 기본 영어 로케일(`en`)을 `IntlProvider`에 전달하고 있습니다.
여러 로케일 또는 번역 객체를 전달할 수 있으며, `IntlProvider`는 자동으로 사용자의 브라우저 언어를 감지하여 적절한 번역을 선택합니다.
번역된 문자열을 표시하려면 `FormattedMessage` 컴포넌트를 사용합니다. 이 컴포넌트는 `id` prop을 통해 메시지 객체 내의 메시지 ID와 일치하는 번역을 찾습니다.
`FormattedMessage`는 `defaultMessage` 및 `values` prop도 사용합니다. `defaultMessage`는 현재 로케일에 대한 번역이 없을 때 대체 메시지를 지정하고, `values` prop은 번역 메시지의 자리 표시자에 동적 값을 제공합니다.
다음은 사용 예시입니다:
import React from "react";
import { FormattedMessage } from "react-intl";
function App() {
return (
<div>
<p>
<FormattedMessage
id="greeting"
defaultMessage="Good morning {name}"
values={{ name: 'John'}}
/>
</p>
</div>
);
}
export default App;
위 코드에서 `FormattedMessage` 컴포넌트의 `id` prop은 `messagesInFrench` 객체의 `greeting` 키를 사용하고, `values` prop은 `{name}` 자리 표시자를 "John" 값으로 대체합니다.
`FormattedNumber` 컴포넌트를 이용한 숫자 서식 지정
React Intl은 현재 로케일을 기반으로 숫자 형식을 지정할 수 있는 `FormattedNumber` 컴포넌트도 제공합니다. 이 컴포넌트는 스타일, 통화, 최소 및 최대 소수 자릿수와 같은 서식을 사용자 정의하기 위한 다양한 prop을 제공합니다.
다음은 몇 가지 사용 예시입니다:
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
Decimal: <FormattedNumber value={123.456} style="decimal" />
</p>
<p>
Percent: <FormattedNumber value={123.456} style="percent" />
</p>
</div>
);
}
export default App;
이 예시에서는 `value` prop을 통해 서식을 지정하려는 숫자를 지정하고 있습니다.
`style` prop을 사용하여 숫자의 형식을 사용자 정의할 수 있습니다. 이 prop은 `decimal`, `percent`, 또는 `currency` 값으로 설정할 수 있습니다.
`style` 속성을 `currency`로 설정하면 `FormattedNumber` 컴포넌트는 `currency` prop에 지정된 코드를 사용하여 숫자를 통화 값으로 변환합니다.
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
</p>
</div>
);
}
export default App;
위 코드 블록은 `currency` 스타일과 `USD` 통화 코드를 사용하여 숫자를 형식화합니다.
또한 `minimumFractionDigits` 및 `maximumFractionDigits` prop을 사용하여 특정 소수 자릿수로 숫자를 형식화할 수도 있습니다.
`minimumFractionDigits` prop은 표시할 최소 소수 자릿수를 지정하고, `maximumFractionDigits` prop은 최대 소수 자릿수를 지정합니다.
숫자의 소수 자릿수가 지정된 `minimumFractionDigits`보다 적으면, React Intl은 숫자를 0으로 채웁니다. 반대로 숫자에 지정된 `maximumFractionDigits`보다 많은 소수 자릿수가 있는 경우에는 숫자를 반올림합니다.
다음은 이러한 prop을 사용하는 예시입니다:
import React from "react";
import { FormattedNumber } from "react-intl";
function App() {
return (
<div>
<p>
<FormattedNumber
value={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
export default App;
`FormattedDate` 컴포넌트를 이용한 날짜 서식 지정
React Intl을 사용하면 일관되고 읽기 쉬운 방식으로 날짜 형식을 지정할 수 있습니다. `FormattedDate` 컴포넌트는 날짜 형식을 지정하는 간단하면서도 강력한 방법을 제공합니다. 이 컴포넌트는 Moment.js와 같은 날짜-시간 라이브러리와 유사하게 작동합니다.
`FormattedDate` 컴포넌트는 `value`, `day`, `month`, 및 `year`과 같은 다양한 prop을 사용합니다. `value` prop은 형식화할 날짜를 받고, 다른 prop들은 날짜의 형식을 구성합니다.
다음은 예시입니다:
import React from "react";
import { FormattedDate } from "react-intl";
function App() {
const today = new Date();
return (
<div>
<p>
Today's date is
<FormattedDate
value={today}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}
export default App;
이 예시에서 `value` prop은 현재 날짜를 사용합니다. 또한 `day`, `month`, 및 `year` prop을 사용하여 각각 날짜, 월, 연도를 긴 형식으로 표시하도록 지정합니다.
날짜, 월, 연도 외에도 다양한 prop을 사용하여 날짜의 표현을 추가로 사용자 정의할 수 있습니다. 아래는 이들이 사용할 수 있는 prop과 값입니다.
- year: "numeric", "2-digit"
- month: "numeric", "2-digit", "narrow", "short", "long"
- day: "numeric", "2-digit"
- hour: "numeric", "2-digit"
- minute: "numeric", "2-digit"
- second: "numeric", "2-digit"
- timeZoneName: "short", "long"
`FormattedDate` 컴포넌트를 사용하여 시간 형식을 지정하고 표시하는 것도 가능합니다.
import React from "react";
import { FormattedDate } from "react-intl";
function App() {
const today = new Date();
return (
<div>
<p>
The time is
<FormattedDate
value={today}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}
export default App;
더 넓은 사용자층을 위한 React 애플리케이션 국제화
이 글을 통해 React 애플리케이션에서 React-Intl 라이브러리를 설치하고 설정하는 방법을 학습했습니다. React-intl을 사용하면 React 애플리케이션의 숫자, 날짜, 통화 형식을 간편하게 관리할 수 있습니다. `FormattedMessage`, `FormattedNumber`, 및 `FormattedDate` 컴포넌트를 활용하여 사용자 로케일을 기반으로 데이터 형식을 사용자 정의할 수 있습니다.
React 개발자들이 흔히 저지르는 실수는 심각한 문제로 이어질 수 있습니다. 예를 들어 상태를 적절히 업데이트하지 못하는 경우가 있습니다. 따라서 이러한 일반적인 오류들을 인지하고 조기에 수정하여 불필요한 비용 발생을 줄이는 것이 중요합니다.