JSX pragma를 이용하여 웹 애플리케이션의 국제화(i18n) 지원 방법

05 Oct 2023

JSXpragma

웹 애플리케이션을 개발할 때 국제 사용자를 대상으로 다국어 지원이 필요한 경우가 있습니다. 이때, JSX pragma를 사용하여 국제화(i18n)를 간편하게 지원할 수 있습니다. 이번 블로그 포스트에서는 JSX pragma를 이용하여 웹 애플리케이션의 국제화를 어떻게 지원할 수 있는지 알아보겠습니다.

1. JSX pragma란?

JSX pragma는 JSX 코드를 JavaScript 함수 호출로 변환해주는 방법을 정의하는 것입니다. JSX pragma는 @jsx 어노테이션을 통해 설정하며, 대부분의 경우 React.createElement를 사용합니다. 하지만 국제화를 위해서는 JSX pragma를 커스터마이징하여 다국어 문자열을 처리하는 함수로 변경해야 합니다.

2. 다국어 문자열 관리

다국어 문자열을 관리하기 위해서는 일반적으로 JSON 형태의 언어 파일을 사용합니다. 각 언어별로 파일을 분리하여 관리하면 효과적입니다. 예를 들면 다음과 같이 en.json과 ko.json 파일을 생성하여 문자열을 관리할 수 있습니다.

// en.json
{
  "greeting": "Hello",
  "buttonText": "Click me"
}

// ko.json
{
  "greeting": "안녕하세요",
  "buttonText": "클릭"
}

3. 다국어 문자열 사용하기

JSX pragma를 커스터마이징하여 다국어 문자열을 처리하는 함수를 만들어보겠습니다.

/** @jsx myJSX */

const language = 'en'; // 현재 언어 설정, 사용자에 따라 동적으로 변경 가능

function myJSX(type, props, ...children) {
  // 다국어 문자열을 가져오는 함수
  function getLocalizedString(key) {
    let localeString = {};
    if (language === 'en') {
      localeString = require('./en.json');
    } else if (language === 'ko') {
      localeString = require('./ko.json');
    }
    
    return localeString[key] || key; // 다국어 문자열이 없을 경우 기본값으로 키 값 출력
  }

  // JSX 코드를 JavaScript 함수 호출로 변환
  if (typeof type === 'string') {
    return type;
  } else {
    const transformedProps = {};
    for (let key in props) {
      transformedProps[key] = (typeof props[key] === 'string') ? getLocalizedString(props[key]) : props[key];
    }
    
    return React.createElement(type, transformedProps, children);
  }
}

// 다국어 문자열 사용 예시
function MyComponent() {
  return (
    <div>
      <h1>{'greeting'}</h1>
      <button>{'buttonText'}</button>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

위의 코드에서 myJSX 함수는 JSX 코드를 JavaScript 함수 호출로 변환하기 전에 다국어 문자열을 처리하는 함수입니다. getLocalizedString 함수를 통해 현재 언어에 맞는 다국어 문자열을 가져옵니다.

MyComponent 컴포넌트에서는 <h1> 요소와 <button> 요소의 내용을 다국어 문자열로 표시합니다. 이때, 문자열을 가져오기 위해 단순히 string으로 감싸주면 됩니다.

4. 결과 확인하기

위의 코드를 실행하면 현재 설정된 언어에 맞게 다국어 문자열이 표시됩니다. 예를 들어, language 변수를 'en'로 설정하면 ‘Hello’와 ‘Click me’가 나타나고, 'ko'로 설정하면 ‘안녕하세요’와 ‘클릭’이 나타납니다.

이와 같이 JSX pragma를 사용하여 간편하게 웹 애플리케이션의 국제화를 지원할 수 있습니다. 새로운 언어를 추가하거나 기존 다국어 문자열을 수정할 때에는 각 언어 파일을 관리하고 getLocalizedString 함수를 업데이트해주면 됩니다.