분류 Reactjs

React 앱을 국제화합니다.

컨텐츠 정보

  • 조회 430 (작성일 )

본문

이 라이브러리는 React 구성 요소 및 API를 제공하여 복수, 번역 처리를 포함하여 날짜, 숫자 및 문자열의 형식을 지정합니다.


https://github.com/formatjs/react-intl 


import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage} from 'react-intl';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Eric',
      unreadCount: 1000,
    };
  }

  render() {
    const {name, unreadCount} = this.state;

    return (
      <p>
        <FormattedMessage
          id="welcome"
          defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                      one {message}
                      other {messages}
                    }`}
          values={{name: <b>{name}</b>, unreadCount}}
        />
      </p>
    );
  }
}

ReactDOM.render(
  <IntlProvider locale="en">
    <App />
  </IntlProvider>,
  document.getElementById('container')
);