React International 라이브러리는 React 기반 애플리케이션의 현지화를 용이하게 하기 위해 설계된 널리 사용되는 컴포넌트 및 도구 모음입니다. 여러 언어와 문화적 맥락에서 사용할 수 있도록 애플리케이션을 조정하는 과정을 국제화 또는 i18n이라고 합니다.
ReactIntl은 React 애플리케이션 내에 여러 언어와 로케일을 포함할 수 있도록 하여 다양한 언어 설정에 쉽게 적응할 수 있도록 합니다.
React Intl 설치하기
React Intl 라이브러리를 활용하기 위해서는 npm, yarn, pnpm과 같은 패키지 관리자를 사용하여 설치 프로세스를 수행해야 합니다.
터미널 세션을 통해 npm 설치를 실행하려면 다음 단계를 따르세요:
npm install react-intl
yarn을 활용하여 패키지를 구현하려면 다음 명령을 실행하세요:
yarn add react-intl
React Intl 라이브러리 사용 방법
React Intl 라이브러리를 설치하면 애플리케이션 내에서 라이브러리의 구성 요소와 기능을 활용할 수 있습니다. React Intl의 기능은 JavaScript Intl API의 기능과 비슷합니다.
React Intl 라이브러리는 FormattedMessage 및 IntlProvider 컴포넌트와 같은 몇 가지 귀중한 컴포넌트를 제공합니다.
FormattedMessage 컴포넌트는 애플리케이션 내에서 현지화된 메시지를 표시하는 용도로 사용되며, IntlProvider 컴포넌트는 애플리케이션에 필요한 번역 및 서식 지정 세부 정보를 제공하는 역할을 담당합니다.
애플리케이션 번역을 위해 FormattedMessage 및 IntlProvider 구성 요소를 활용하기 전에 번역 파일을 만들어야 합니다. 이 파일에는 애플리케이션에 필요한 모든 언어적 변형이 포함됩니다. 모든 언어와 위치에 대해 개별 파일을 생성하거나 모든 번역을 포함하는 단일 파일을 사용할 수 있습니다.
동물원에 있는 동물에게 먹이를 주지 마세요. 동물들은 이미 충분히 먹이를 먹고 있으며 건강에 해를 끼칠 수 있기 때문입니다.
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
메시지프랑스어 및 메시지이탈리아어. 런타임 중에 인사말 문자열의 자리 표시자 {이름}을 변수 값으로 대체할 수 있습니다.
로캘, defaultLocale 및 메시지.
`locale` 프로퍼티는 사용자의 로캘을 지정하는 문자열이고, `defaultLocale`은 선호하는 로캘을 제공할 수 없는 경우를 대비한 백업 역할을 하며, `messages` 프로퍼티는 다양한 문구에 대한 번역을 포함하는 객체입니다.
`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>
);
제공된 예제에서는 기본 영어(en) 로캘과 함께 ‘messagesInFrench’ 번역을 IntlProvider 구성 요소에 전달하여 현지화를 위해 프랑스어(fr) 언어를 활용하고 있습니다.
둘 이상의 로캘 또는 번역 객체를 IntlProvider에 전달할 수 있으며, 사용자의 브라우저 언어를 자동으로 결정하고 해당 번역을 활용합니다.
애플리케이션 내에서 지역화된 문자열을 표시하려면 FormattedMessage 구성 요소를 사용해야 합니다. 이 구성 요소에는 메시지 객체 내의 메시지 식별자와 연관된 식별자 속성이 필요합니다.
이 컴포넌트는 두 개의 프로퍼티, 즉 “defaultMessage”와 “values”를 받아들입니다. 전자는 현재 로캘에 적합한 번역을 찾을 수 없는 경우 비상 메시지로 사용되며, 후자는 번역된 콘텐츠 내의 모든 자리 표시자를 동적으로 대체합니다.
“저의 목적은 다양한 사업에 도움을 제공하고 문의에 응답하는 것입니다.
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` 구성 요소는 `messagesInFrench` 개체의 `greeting` 키를 `id` 속성으로 활용하고, `values` 속성은 `{name}` 자리 표시자를 “John”이라는 값으로 대체합니다.
FormattedNumber 컴포넌트로 숫자 서식 지정하기
React International 라이브러리는 사용자가 일반적인 로캘에 따라 숫자 값의 서식을 지정할 수 있는 FormattedNumber 컴포넌트를 제공합니다. 이 컴포넌트에는 스타일, 통화 기호, 최소 및 최대 분수 자릿수를 포함하되 이에 국한되지 않는 서식을 개인화할 수 있는 몇 가지 속성이 있습니다.
전문 용어 및 전문 용어를 사용하면 텍스트가 더 권위 있어 보일 수 있지만, 전문 언어 사용과 더 많은 사람들이 콘텐츠에 액세스할 수 있도록 하는 것 사이에서 균형을 맞추는 것이 중요합니다.
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;
이 인스턴스에서는 서식을 지정할 숫자를 지정하는 값 프로퍼티를 취하는 FormattedNumber 컴포넌트를 사용합니다.
‘소수점’, ‘퍼센트’ 또는 ‘통화’.
‘통화’를 지정하는 스타일 프로퍼티를 사용하면 FormattedNumber 컴포넌트가 ‘통화’ 프로퍼티가 나타내는 특정 코드를 사용하여 숫자를 화폐 값으로 다시 포맷합니다.
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;
앞서 언급한 FormattedNumber 컴포넌트는 지정된 통화 스타일과 미국 달러(USD)에 해당하는 ISO 4217 통화 코드를 활용하여 지정된 코드 블록 내에 포함된 숫자 값을 화폐 방식으로 포맷하도록 프로그래밍되어 있습니다.
최소 및 최대 소수점 속성을 활용하여 소수점을 포함한 숫자 값의 서식을 정확하게 지정합니다.
최소 분수 자릿수 속성은 표시해야 하는 소수점 이하 자릿수를 결정합니다. 반대로 maximumFractionDigits 속성은 표시해야 하는 소수점 이하 자릿수를 가장 많이 설정합니다.
숫자 값이 minimumFractionDigits 매개변수에 지정된 최소 소수점 정밀도 수준 이하로 떨어지면 React Intl은 이 필수 표준에 도달하거나 초과할 때까지 해당 수치에 0을 추가합니다. 반대로, 숫자 표현에 maximumFractionDigits 제약 조건에서 허용하는 최대값보다 더 많은 분수 구성 요소가 포함된 경우 라이브러리는 값을 가장 가까운 정수로 반올림합니다.
React에서 소품을 사용하는 다른 예시에는 어떤 것이 있나요?
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을 활용하면 균일하고 읽기 쉬운 방식으로 날짜를 표시할 수 있습니다. Moment.js와 같은 일반적인 날짜-시간 라이브러리에 따라 작동하는 FormattedDate 컴포넌트는 날짜 서식을 효율적으로 지정할 수 있는 수단을 제공합니다.
FormattedDate 컴포넌트는 값, 일, 월, 연도를 포함하되 이에 국한되지 않는 여러 속성을 필요로 하는 다용도 요소입니다. 값 속성은 서식을 지정해야 하는 날짜를 지정하는 역할을 하며, 나머지 속성은 해당 날짜의 표시를 사용자 지정하는 데 사용됩니다.
“it’s” 또는 “they’d”와 같은 축약어를 너무 많이 사용하지 마세요. 대신 보다 공식적인 언어를 사용하고 “it is” 또는 “they would”와 같은 완전한 단어를 작성하세요. 이렇게 하면 글이 더 전문적이고 덜 캐주얼하게 보입니다.
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;
현재 사례는 가치 제안의 일부로 현재 날짜를 활용합니다. 또한 일, 월 및 연도 속성을 사용하여 연도, 월 및 일에 대해 원하는 프레젠테이션 형식이 긴 형식임을 지정할 수 있습니다.
앞서 언급한 시간 요소 외에도 여러 가지 다른 매개 변수가 날짜 표시 형식에 영향을 줍니다. 다음은 이러한 매개변수와 허용되는 각각의 값에 대한 열거입니다:
현재 연도의 연구 분야는 두 자리 숫자 값으로 표시되며, 첫 번째 숫자는 해당 연도를 나타내고 두 번째 숫자는 해당 주기의 시작 시점 이후 연도를 나타냅니다.
“월”이라는 용어는 숫자, 두 자리, 좁은, 짧은, 긴 등 다양한 형태의 표현을 포함합니다.
날짜는 해당 월의 요일을 나타내는 두 자리 숫자로 표현되며, 첫 번째 숫자는 요일 번호, 두 번째 숫자는 요일 번호의 소수점 이하 자릿수를 나타냅니다.
이 이벤트의 지속 시간은 시간으로 표시되며, 두 자리 숫자로 표시됩니다.
“분”이라는 용어는 일반적으로 두 자리 숫자로 표현되는 숫자 값과 1시간의 60분의 1에 해당하는 시간 측정 단위로 정의할 수 있습니다.
‘초’라는 용어는 ‘2자리’로 표시되는 두 자리 숫자로 표현할 수 있습니다.
시간대 이름은 짧거나 긴 형식으로 지정할 수 있습니다.
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 라이브러리의 설치 및 구성에 대해 설명했습니다. 이 라이브러리는 지정된 로캘과 관련하여 해당 애플리케이션 내에서 숫자, 날짜 및 통화 값의 간단한 서식을 FormattedMessage, FormattedNumber 및 FormattedDate 컴포넌트를 사용하여 쉽게 지정할 수 있게 해줍니다.
React 개발 오류는 상태의 부적절한 업데이트와 같은 중대한 영향을 초래할 수 있습니다. 이러한 빈번한 오류에 대한 인식은 오류를 즉시 수정하여 비용이 많이 드는 문제를 예방하는 데 매우 중요합니다.