React Context API로 다국어 웹사이트 만들기

이 기사에서는 React Context API를 사용하여 다국어 웹 사이트를 개발하는 방법을 설명하려고 합니다. 단어보다 코드를 더 잘 읽는 데 익숙하다면 this Github repository 에서 예제 프로젝트를 검토할 수 있습니다.

그리고 여기live POC of the project.가 있습니다.
(이 링크는 Github Repo에도 있습니다)

먼저 공식 React 웹 사이트에서 the React Context API 및 useContext Hook 문서를 한 눈에 볼 것을 강력히 제안합니다.

우리가 간다! 프로젝트의 폴더 구조는 다음과 같습니다.


텍스트는 언어별로 JSON으로 저장됩니다. 아래에서 영어의 예를 볼 수 있습니다.

{
  "exploreHeader": "Explore",
  "welcomeDescription": "This is a demo app for multi-language website with React Context API",
  "clickMe": "Click Me",
  "aboutMe": "For more info about the author",
  "buttonClicked": "You clicked to button!"
}

그것들은 모두 사전 개체에 저장되며 이 기사의 뒷부분에서 설명할 선택한 언어에 따라 표시됩니다.

import tr from './tr.json';
import en from './en.json';
import de from './de.json';

export const dictionaryList = { en, tr, de };

export const languageOptions = {
  en: 'English',
  tr: 'Türkçe',
  de: 'Deutsch'
};

언어 선택기는 languageOptions 로 채워집니다. 사용자는 여기에서 웹사이트의 언어를 변경할 수 있습니다.

선택한 언어와 사전을 포함하는 컨텍스트를 생성하겠습니다.

import { languageOptions, dictionaryList } from '../languages';

// create the language context with default selected language
export const LanguageContext = createContext({
  userLanguage: 'en',
  dictionary: dictionaryList.en
});

그런 다음 컨텍스트 제공자를 정의하십시오. 선택한 언어를 설정하고 이 컨텍스트 제공자를 통해 사전에서 관련 텍스트를 가져올 수 있습니다.

// it provides the language context to app
export function LanguageProvider({ children }) {
  const defaultLanguage = window.localStorage.getItem('rcml-lang');
  const [userLanguage, setUserLanguage] = useState(defaultLanguage || 'en');

  const provider = {
    userLanguage,
    dictionary: dictionaryList[userLanguage],
    userLanguageChange: selected => {
      const newLanguage = languageOptions[selected] ? selected : 'en'
      setUserLanguage(newLanguage);
      window.localStorage.setItem('rcml-lang', newLanguage);
    }
  };

  return (
    <LanguageContext.Provider value={provider}>
      {children}
    </LanguageContext.Provider>
  );
};

언어 선택기가 변경되면 공급자의 userLanguageChange() 메서드를 호출합니다.

아래에서 LanguageSelector.js를 검토할 수 있습니다.

import React, { useContext } from 'react';

import { languageOptions } from '../languages';
import { LanguageContext } from '../containers/Language';

export default function LanguageSelector() {
  const { userLanguage, userLanguageChange } = useContext(LanguageContext);

  // set selected language by calling context method
  const handleLanguageChange = e => userLanguageChange(e.target.value);

  return (
    <select
      onChange={handleLanguageChange}
      value={userLanguage}
    >
      {Object.entries(languageOptions).map(([id, name]) => (
        <option key={id} value={id}>{name}</option>
      ))}
    </select>
  );
};

그리고 App.js인 주요 구성 요소를 LanguageProvider로 래핑해야 합니다.

function App() {
  return (
    <LanguageProvider>
      <div className="App">
        <header className="App-header">
          <LanguageSelector />
        </header>

        <Explore />
      </div>
    </LanguageProvider>
  );
}

그런 다음 텍스트를 번역하기 위해 Text 구성 요소를 정의합니다.

// get text according to id & current language
export function Text({ tid }) {
  const languageContext = useContext(LanguageContext);

  return languageContext.dictionary[tid] || tid;
};

이제 이 구성 요소를 사용하여 미리 정의된 언어 개체(기사 시작 부분에서 언급함)에서 선택한 언어에 따라 관련 텍스트를 수집할 수 있습니다.
또한 아래의 입력 자리 표시자 예와 같이 언어 컨텍스트를 직접 호출하여 사용할 수 있습니다.
다음은 구성 요소의 몇 가지 사용 예입니다.

export default function Explore() {
  const [clickText, setClickText] = useState();
  const { dictionary } = useContext(LanguageContext);

  const handleClick = () => {
    setClickText(<Text tid="buttonClicked" />);
  }

  return (
    <div>
      <h1><Text tid="exploreHeader" /></h1>
      <p><Text tid="welcomeDescription" /></p>

      <div>
        <input type="text" placeholder={dictionary.enterText} />
        <button onClick={handleClick}>
          <Text tid="clickMe" />
        </button>
        <p>{clickText}</p>
      </div>

      <a href="https://halilcanozcelik.com" target="_blank" rel="noopener noreferrer">
        <Text tid="aboutMe" />
      </a>
    </div>
  );
}

또한 선택한 언어는 처음에 이 옵션으로 채워진 브라우저 및 컨텍스트 상태의 데이터베이스 또는 로컬 저장소에 저장되어야 합니다. 대체 시나리오에 languageOptions 옵션을 사용할 수 있습니다. 저는 이 프로젝트에서 영어("en")를 사용했습니다. 또한 선택한 언어를 로컬 저장소에 저장하고 처음부터 거기에서 읽습니다. 정보가 없으면 브라우저 언어를 기본 언어로 사용합니다.
도움이 되길 바랍니다.