프로젝트를 진행하며 한/영 버전 모두 지원해야 하는 일이 있었다!!!
개발 기간이 길지 않아 나와있는 라이브러리를 찾아보았고 발견한건
React-i18next
어떻게.. 읽는걸까 .. 리액트 아이십팔넥스트 ..? 아이일팔넥스트 ..?
해당 라이브러리를 프로젝트에 적용한 과정을 소개하고자 한다 !!
관련 폴더구조는 이렇게 생겼다.
우선 설치를 위해 필요한 명령어
npm install i18next react-i18next
i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./en/translation.json";
import translationKO from "./ko/translation.json";
const resources = {
en: {
translation: translationEN,
},
ko: {
translation: translationKO,
},
};
i18n.use(initReactI18next).init({
resources,
lng: "ko",
fallbackLng: "en", // 번역 파일에서 찾을 수 없는 경우 기본 언어
interpolation: {
escapeValue: false,
},
});
export default i18n;이렇게 영어를 en, 한글을 ko로 설정하고,
번역이 필요한 데이터를 각각
./en/translation.json, ./ko/translation.json에 정의해둔다.
./en/translation.json
{
"nav": {
"Intro": "About",
"notification": "News",
"promotion": "Club",
"performance": "Schedule",
"location": "Location",
"review": "Reviews",
"FAQ": "FAQ",
"about": "Team"
},
"notice": {
"maintitle": "Announcement",
"subTitle": "Be sure to check the information below and join us to make this a fun festival for everyone!",
"msubTitle": "Be sure to check the information below and join us to make this a fun festival for everyone!",
"search": "Search",
"urgent": "Must read",
"num": "No",
"title": "Title",
"date": "Date",
"noresult": "There are no registered posts.",
"write": "Written by: Administrator",
"list": "View List"
},
}./ko/translation.json
{
"nav": {
"Intro": "소개",
"notification": "공지",
"promotion": "동아리",
"performance": "공연일정",
"location": "장소",
"review": "후기",
"FAQ": "FAQ",
"about": "기획단"
},
"notice": {
"maintitle": "공지사항",
"subTitle": "아래 내용을 꼭 확인하시고, 모두가 즐거운 축제가 되도록 함께해 주세요!",
"msubTitle": "아래 내용을 꼭 확인하시고,\n모두가 즐거운 축제가 되도록 \n함께해 주세요!",
"search": "검색어를 입력해주세요.",
"urgent": "필독",
"num": "번호",
"title": "제목",
"date": "날짜",
"noresult": "등록된 게시글이 없습니다.",
"write": "작성인: 관리자",
"list": "목록보기"
},
}대략 이런 식이다 !
Notice를 중심으로 봐보자!!
우선 해당 라이브러리 Import가 필요하다.
import { useTranslation } from "react-i18next";다음의 정의가 필요하다
const { t } = useTranslation();한/영 버전이 필요한 부분에 다음과 같은 식으로 작성한다.
t(`notice.maintitle`)실제 코드를 살짝 봐보면 다음과 같다.
<MainTitle
mainText={t(`notice.maintitle`)}
subText={t(`notice.subTitle`)}
/>이렇게 하면 notice의 maintitle을 보여주겠다는 뜻이고,
이는 지금이 영어 버전인지, 한국어 버전인지에 따라 달라질 것이다.
그렇다면 지금이 영어 버전인지, 한국어 버전인지 어떻게 알까 ?
Recoil로 관리했다!
import { atom } from "recoil";
export const languageState = atom({
key: "languageState",
default: localStorage.getItem("language") || "ko",
effects_UNSTABLE: [
({ onSet }) => {
onSet((nowLang) => {
localStorage.setItem("language", nowLang); // 상태가 변경될 때 localStorage에 저장
});
},
],
});다음과 같이 recoil로 상태 관리를 하고자 했다.
한영 버전은 nav의 버튼에 따라 달라지도록 구현했기에 nav를 더 봐보자.
관련 코드만 가져와보겠다.
import { useRecoilState } from "recoil";
import { languageState } from "../../context/recoil/languageState";
import i18n from "../../lib/lang/i18n";
const [lang, setLang] = useRecoilState(languageState);
const isEnglish = lang === "en";한/영 버튼을 눌렀을때 시행되는 함수다.
isEnglish는 현재 언어(lang)이 en인지 확인한다.
useRecoilState를 사용하여 languageState로부터 lang 값을 가져오고, isEnglish는 그 값이 "en"이면 true, 그렇지 않으면 false다.
const handleToggle = () => {
const newLang = isEnglish ? "ko" : "en";
setLang(newLang);
i18n.changeLanguage(newLang);
localStorage.setItem("language", newLang);
};isEnglish가 true일 경우, 즉 현재 언어가 영어라면 한국어 "ko"로 변경하고, isEnglish가 false일 경우 한국어에서 영어로 전환해준다. 이때 newLang를 선언해 조건부로 ko or en을 설정해준다.
setLang(newLang)을 호출하여 languageState를 새로운 언어(newLang) 값으로 업데이트한다.
새로고침해도 원래의 언어 상태를 유지하기 위해localStorage.setItem("language", newLang)을 호출하여 선택한 언어를 브라우저의 로컬 스토리지에 저장한다.
이렇게 다국어 기능 라이브러리를 사용해보았다.
다만 아쉬웠던 점은 정적인 데이터만 번역이 가능했다는 점이다.
사람들이 리뷰를 실시간으로 쓰고 그것도 번역하는 기능도 있었다면 어땠을까 ??
(사실 크게 필요한 부분은 아닌 것 같지만 탐나는 도전이다)
다음에는 실시간 번역을 구현해보고 싶다 !! (gpt api..? google api ..? 찾아봐야 한다 ㅎㅅㅎ)
끝 !!!
(아 참고로 이렇게 한글, 영어 버전 하나하나 하는거 진짜 너무 귀찮다 ...그나마 디자이너분이 피그마 자동 변환 써서 만들어주셔서 .. 그대로 복붙했는데 아니었다면 끔찍 ..)
(진짜 끝 !!!)
