리액트 애플리케이션에서 다국어 지원은 국제 사용자들에게 훌륭한 경험을 제공하는 중요한 기능입니다. 이를 위해 리액트 라우터를 사용하여 언어에 맞는 컴포넌트 및 라우트를 동적으로 로드하고 전환하는 방법을 알아보겠습니다.

1. 다국어 지원 패키지 설치

먼저, 리액트 애플리케이션에서 다국어 지원을 위해 react-i18next 패키지를 설치해야 합니다. 이 패키지는 i18next 라이브러리의 리액트 컴포넌트로, 다국어 지원을 효과적으로 구현하도록 도와줍니다. 다음 명령어를 사용하여 패키지를 설치합니다:

npm install react-i18next i18next

2. 언어 설정 컴포넌트 생성

리액트 라우터와 함께 다국어 지원을 구현하기 위해 먼저 언어 설정 컴포넌트를 생성해야 합니다. 이 컴포넌트는 사용자가 원하는 언어를 선택할 수 있는 드롭다운 메뉴를 제공하고, 선택된 언어를 애플리케이션 전역에서 사용할 수 있도록 합니다.

import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageSelector() {
  const { i18n } = useTranslation();

  const changeLanguage = (event) => {
    i18n.changeLanguage(event.target.value);
  };

  return (
    <select onChange={changeLanguage}>
      <option value="en">English</option>
      <option value="ko">한국어</option>
    </select>
  );
}

export default LanguageSelector;

위의 코드에서는 react-i18next의 useTranslation 훅을 사용하여 번역 함수를 가져오고, changeLanguage 함수를 통해 선택된 언어를 변경합니다. 드롭다운 메뉴에는 영어와 한국어의 선택지가 제공되었습니다. 필요에 따라 추가적인 언어를 포함할 수 있습니다.

3. 언어별 라우트 및 컴포넌트 생성

이제 언어별로 다른 라우트 및 컴포넌트를 생성할 차례입니다. 예를 들어, 영어와 한국어에 대한 다른 홈페이지를 구성하려면 다음과 같이 라우트와 컴포넌트를 생성합니다:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import HomePageEN from './components/HomePageEN';
import HomePageKO from './components/HomePageKO';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('app.title')}</h1>

      <Switch>
        <Route exact path="/" component={HomePageEN} />
        <Route path="/ko" component={HomePageKO} />
      </Switch>
    </div>
  );
}

export default App;

위의 코드에서는 react-router-dom의 Route와 Switch 컴포넌트를 사용하여 영어와 한국어용 라우트를 설정하고, react-i18next의 useTranslation 훅을 사용하여 번역 함수를 가져옵니다. HomePageEN과 HomePageKO는 각각 영어와 한국어용 홈페이지 컴포넌트로 대체되어야 합니다.

4. 언어 설정 적용

이제 차례로 언어 설정 컴포넌트와 언어별 라우트 및 컴포넌트를 원하는 곳에서 사용하여 리액트 애플리케이션에 다국어 지원을 적용할 수 있습니다. 다음은 메인 앱 컴포넌트의 예시입니다:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

import LanguageSelector from './components/LanguageSelector';
import App from './App';

function MainApp() {
  return (
    <Router>
      <LanguageSelector />
      <App />
    </Router>
  );
}

export default MainApp;

위의 코드에서는 react-router-dom의 BrowserRouter 컴포넌트를 사용하여 라우팅을 설정하고, LanguageSelector를 언어 설정 컴포넌트로 사용합니다. 그리고 App 컴포넌트는 메인 애플리케이션 컴포넌트입니다.

5. 번역 파일 관리

마지막으로, 번역 파일을 관리하여 다국어 지원을 완성합니다. src 폴더 내에 locales 폴더를 생성하고, 그 안에 언어별로 다른 JSON 파일을 생성합니다. 예를 들어, en.json과 ko.json 파일을 생성하여 각 파일에 해당 언어의 번역 정보를 작성합니다. 예를 들면:

// en.json
{
  "app": {
    "title": "React Router Localization Example",
    "welcomeMessage": "Welcome to the English version of the homepage!"
  }
}

// ko.json
{
  "app": {
    "title": "리액트 라우터 다국어 지원 예제",
    "welcomeMessage": "한국어 홈페이지에 오신 것을 환영합니다!"
  }
}

위의 예시에서는 app.title과 app.welcomeMessage와 같은 키를 사용하여 애플리케이션에서 사용될 번역 문구를 관리합니다.

마무리

이렇게 리액트 라우터를 사용하여 자바스크립트 애플리케이션에 다국어 지원을 구현하는 방법을 살펴보았습니다. react-i18next 패키지를 사용하여 언어 설정 컴포넌트와 번역 기능을 적용하고, 언어별로 다른 라우트와 컴포넌트를 구성하는 방식을 사용합니다. 이를 통해 국제 사용자들에게 더 좋은 사용자 경험을 제공할 수 있습니다.