[OrientalUnity][React] i18next를 활용한 다국어 처리

목차

 

1️⃣ 글을 작성하기에 앞서...

필자의 경우 BackEnd를 위주로 공부하다 보니 Spring, Java 코드들에 비해서는 깔끔하면서 능숙한 코드가 안나올 수도 있다.

 

그 점은 양해하며, 어떻게 작업을 했는지를 중점으로 봐주면 좋을 듯 하다.. 😭

---

2️⃣ 다국어 처리를 하게 된 이유 그리고 i18next

해당 프로젝트는 게시물을 작성 할 때 4개국어로 번역한 이후 저장이 되는 타 국가와 소통이 가능한 프로젝트이다.

정작 게시물은 4개국어로 저장이 되는데 반해, 페이지는 한국어로 계속해서 표현이 되면 부자연스럽다 생각하게 되었다.

 

이후 생각이 들었던 프로젝트의 방향은 다양한 사이트에서 봤던 기능인, 국가 변경을 했을 때 해당 국가의 언어에 맞게 페이지, 데이터가 변경이 되어야 겠다는 생각을 하게 되었고 다국어 처리를 할 수 있는 방법이 무엇이 있는지를 확인하다 i18next를 사용할 수 있다는 것을 알아 선택하게 되었다.

---

3️⃣ i18next란? 설치방법은?

공식페이지를 보면 JavaScript를 기반으로 한 국제화 프레임워크로, 다국어 처리를 할 수 있는 프레임워크다.

 

사용할 수 있는 도구를 다 기록해 놓은 것 같다.. (이미지에는 없지만 스프링도 사용은 가능하다는걸 처음알았다.)

 

 

설치의 경우에는 FrontEnd 프로젝트에서 다음의 Json적용을 하면 된다.

필자의 경우에는 두개 전부 적용을 했다.

---

4️⃣ i18next 설정

필자가 프로젝트에 적용한 설정은 다음과 같다.

 

4개국어의 정보를 resources로 담고, 이후 i18n객체에 지정을 하였다.

또한 localStoreage에 기존에 선택한 값이 없는 경우 한국어가 기본적으로 설정하게 하였다.

 

resources의 언어값은 개발하는 본인이 직접 지정을 해도 상관없다.

 

실제 src하위의 디렉토리 구조가 locales아래에 번역된 정보들이 존재한다.

 

 

번역정보를 담는 일부인 중국어와 한국어에 대한 번역 메세지 정보를 담는 파일역시 전부 json으로 구성하였다.

---

5️⃣ 각 컴포넌트에서 해야하는 작업

다국어 메세지를 가져와야 하는 컴포넌트에서는 아래와 같이 useTranslation()을 통하여 i18next의 hook을 가져와야한다.

 

이후 메세지가 필요한곳에 useTranslation의 첫번째 변수를 사용해 메세지를 가져 올 수 있게 된다.

 

이후 필자의 경우에는 i18n을 effect를 통해 감지를 하였는데, 선택한 국가의 변경이 일어날 때 페이지의 모든 언어를 선택한 국가의 언어로 변경하고자 하여 감지를 진행하였다.

---

6️⃣ 헤더에서의 언어 선택과 데이터 변경

완성된 기능은 아래의 이미지처럼 Header에서 언어를 선택할 경우 언어가 변경되도록 진행하였다.

데이터가 변경되는 기능은 각페이지마다 useEffect를 통해 변경감지로 데이터가 변경되게 하였다.

 

 

 

해당 챕터에서는 Header의 코드를 나열해보고자 한다.

 

우선 Header에서는 Language를 선택할 수 있는 컴포넌트를 호출합니다. (원본 소스에서는 다양한 props가 있지만 가독성을 위해 전부 제거하였습니다.)

 

 

이후 셀렉트가 가능한 드롭박스의 코드는 아래와 같이 작성을 하였습니다.Option의 Value를 i18n.js의 resources에 선언했던 Key값으로 지정을 하였으며, onChange이벤트가 발생할 경우에는 i18n.changeLanguage의 설정 언어를 변경해 주었습니다.

 

 

i18n의 useTranslation자체가 Hook으로 작동이 되는 원리이다 보니, 각기 다른 컴포넌트에서 사용이 가능했으며 한곳에서 변경을 시켜도 다른곳에서 감지를 하고 그에 맞는 언어로 변경이 되는 원리여서 다음과 같이 onChange이벤트에서 언어변경만으로 구현이 가능하였습니다.

---

7️⃣ 글을 마치며...

Front.. 특히 SPA에 대해서는 매우 해박한 지식까지 가지고 있는 부분이 아니다 보니, 실제 구현을 하면서 작동원리를 깊게 이해를 하지 못하는걸 느낄 수 있었던 부분이었습니다.

 

그러다 보니 정말 참고한 Reference도 많았던 것 같습니다.

 

그래도 기능의 구현과 구현된 기능을 가져다 쓰는 부분이다 보니 금방감은 잡고 사용이 가능했어서 큰 문제는 없었고.. 단지 메세지를 전부 미리 채워놔줘야 한다는 불편함을 크게 느낄 수 있었습니다.

 

막상 완성되고 보니 언어감지를 해가지고 페이지가 자동으로 변경되는것을 봤을떄는 아 이래서 프론트 하는 구나 하는 생각도 들었던 작업이었습니다.

---

8️⃣ 참고한 Reference

1. https://react.i18next.com/
2. https://babycoder05.tistory.com/entry/React%EC%97%90%EC%84%9C-react-i18next-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95  
3. https://dlsgh120.tistory.com/53 
4. https://velog.io/@remon/React-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%B2%98%EB%A6%AC-react-i18next https://babycoder05.tistory.com/m/entry/React%EC%97%90%EC%84%9C-react-i18next-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
5. https://byul91oh.tistory.com/552