커스텀한 다국어 처리를 위한 'i18next' (React-i18next)

회사의 경우 여러 해외 법인이 존재하고 있어, 다국어 지원이 필요하다.

웹페이지의 경우 chrome 등 인터넷 브라우저 내 번역으로도 지원이 가능하지만,

회사에서는 사전적으로 번역하기 보다는, 각 나라에서 이해하기 쉬운 단어로 번역하는 케이스가 필요하게 된다.

​

이때 사용되는 것이 i18next.

 

i18next란?

Javascript로 작성된 국제화 프레임워크로 여러 국가의 언어를 처리할 수 있도록 도와준다.

많이 사용하는 라이브러리로는 react-i18next, next-i18next, next-translation 이렇게 3가지.

각 라이브러리에 장단점과 특성이 존재하므로 알아보고 채택하는 것을 추천한다.

​

우리의 경우 react-i18next 를 채택하게 되었는데.. 정확히는 채택 당했다.

고로 react-i18next 에 대하여 설명해보도록 하겠다.

​

사용.

Recoil 처럼 React 에서 제공하는 Hook이 아닌 외부 라이브러리 이므로 npm을 통하여 설치를 해주어야 한다.

npm install react-i18next i18next --save

 

이후 react 내 json 파일로 만들어서 꺼내어 쓰는 case 도 많지만,

현재 우리 프로젝트의 경우 DB에 있는 다국어 테이블을 참조하여 발라줘야 하므로..

 

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from 'i18next-http-backend';

i18next.use(initReactI18next).use(HttpBackend).init({
  lng: localStorage.getItem("lng") || "en",
  fallbackLng: "en", // fallback language
  backend: {
    loadPath: "주소지값/{{lng}}",
    parse: (data) => {
       return JSON.parse(data);
    },
    caching: false,
  },
});

// 여러 언어를 한 번에 로드
const supportedLanguages = ['kr', 'fr', 'en'];
supportedLanguages.forEach(lang => {
  i18next.loadLanguages(lang);
});


export default i18next;

 

이런 식으로 한번에 불러와서 저장해두고, 꺼내어 쓰는 형식으로 사용한다.

 

@GetMapping("/주소지/{language}")
    public ResponseEntity<Object> getTranslations(@PathVariable String language) {
        System.out.println("호출:::"+language);
        if ("fr".equals(language)) {
            // French translations
            return ResponseEntity.status(HttpStatus.OK).body(
                    Map.of("welcome", "Bienvenue", "hello", "Bonjour")
            );
        } else if ("kr".equals(language)) {
            // Korean translations
            return ResponseEntity.status(HttpStatus.OK).body(
                    Map.of("welcome", "환영합니다", "hello", "안녕하세요")
            );
        } else {
            return ResponseEntity.status(HttpStatus.OK).body(
                    Map.of("welcome", "welcome", "hello", "hello")
            );
        }
    }

 

 

spring 측 구현.

 

컨트롤러에서 바로 해당 모양으로 body를 sending 하도록 해두었는데,

정상적으로 DB에서 데이터를 가지고 오려면 controller-service-mapper로 연결해주고,

mapper에서 해당 모양대로 sql을 구현해주면 된다.

 

 

---

​공식 문서를 읽거나 개발하며 느꼈던 뇌피셜로 작성하고 있으니, 
궁금하신 점이나 잘못된 점이 있다면 댓글 남겨주시면 감사하겠습니다.