[javascript] 리액트 라우터의 국제화 지원과 다국어 라우팅

04 Dec 2023

javascript

React Router는 React 애플리케이션을 위한 라우팅 프레임워크로, 사용자를 다른 페이지로 이동시키기 위해 URL을 관리하는 기능을 제공합니다. 이를 통해 다국어 애플리케이션에서 다국어 라우팅을 지원할 수 있습니다.

다국어 라우팅의 필요성

다국어 애플리케이션에서는 사용자의 언어 설정에 따라 해당 언어로 컨텐츠를 제공해야 합니다. 일반적으로 언어 설정은 언어 코드를 포함한 URL의 맨 처음에 올라와야 합니다. 예를 들어, 영어로 한국어 페이지를 접속하고자 할 때는 /en/korean-page와 같은 구조로 URL이 구성되어야 합니다. 따라서, 리액트 라우터에서는 이러한 다국어 라우팅을 지원해야 합니다.

리액트 라우터의 국제화 지원

리액트 라우터에서 국제화를 지원하기 위해 react-intl 라이브러리를 사용할 수 있습니다. react-intl은 리액트 애플리케이션에서 국제화를 처리하는 데 사용되는 인터내셔널화 라이브러리입니다. 이 라이브러리를 사용하면 다국어 메시지를 관리하고, 언어 설정에 따라 알맞은 메시지를 렌더링할 수 있습니다.

다국어 라우팅 설정

리액트 라우터에서 다국어 라우팅을 설정하기 위해서는 라우트 컴포넌트를 적절하게 생성하고 설정해야 합니다. 다음은 예제 코드입니다.

import { Route } from 'react-router-dom';
import { IntlProvider } from 'react-intl';

// 다국어 메시지 정의
const messages = {
  en: {
    home: 'Home',
    about: 'About',
  },
  ko: {
    home: '홈',
    about: '소개',
  },
};

const App = () => {
  // 언어 설정을 추출하는 로직
  const language = window.location.pathname.startsWith('/en') ? 'en' : 'ko';

  return (
    <IntlProvider locale={language} messages={messages[language]}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </IntlProvider>
  );
};

const Home = () => {
  const { formatMessage } = useIntl();
  const homeText = formatMessage({ id: 'home' });

  return <div>{homeText}</div>;
};

const About = () => {
  const { formatMessage } = useIntl();
  const aboutText = formatMessage({ id: 'about' });

  return <div>{aboutText}</div>;
};

위의 코드에서 IntlProvider 컴포넌트를 사용하여 언어 설정과 메시지를 제공합니다. 그리고 useIntl 훅을 사용하여 메시지를 현재 언어로 포맷팅할 수 있습니다. 예제 코드에서는 두 개의 라우트 컴포넌트를 생성하고, 언어에 따라 다른 메시지를 렌더링하도록 설정되어 있습니다.

다국어 라우팅을 위한 리액트 라우터의 설정은 위 예제 코드를 참고하여 적절하게 구현하면 됩니다.

결론

리액트 라우터는 다국어 애플리케이션에서 다국어 라우팅을 지원하기 위해 react-intl 라이브러리를 사용할 수 있습니다. 다국어 메시지를 관리하고 언어 설정에 따라 알맞은 메시지를 렌더링하는 방식으로 다국어 라우팅을 구현할 수 있습니다. 이를 통해 사용자가 올바른 언어로 페이지를 이동할 수 있게 됩니다.

다국어 라우팅의 필요성

리액트 라우터의 국제화 지원

다국어 라우팅 설정

결론

참고 자료