React i18n :: key에 콜론(:)이 있을때

권장하지 않는 방식이지만
현재 팀에서 영문 번역 값을 json 파일의 키로 사용하고 있다보니
여러 이슈가 발생하고 있다.

common.json

{
	ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef: 'ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef'
}

그중 하나로 이렇게 key에 콜론(:)이 들어가 있는 경우인데
(사실 이 경우에 번역이 필요하진 않지만,,)

아무튼 저 키를 번역하면

 

console.log(t(`ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef`))
// '4567.89ab.cdef.0123.4567.89ab.cdef'

이렇게 'ex.0123:'이 제거되고 4567부터 출력되는 것을 확인할 수 있다.

 

원인

i18n에서는 콜론(:)을 디폴트 값으로 네임스페이스를 구분하고 있다. 
공식 문서에서 nsSepartor를 검색해 보면 해당 내용을 확인할 수 있다 (링크)

 

i18next.init({
  ns: ['common', 'moduleA', 'moduleB'],
  defaultNS: 'moduleA'
}, (err, t) => {
  i18next.t('myKey'); // key in moduleA namespace (defined default)
  i18next.t('common:myKey'); // key in common namespace (not recommended with ns prefix when used in combination with natural language keys)
  // better use the ns option:
  i18next.t('myKey', { ns: 'common' });
});

// load additional namespaces after initialization
i18next.loadNamespaces('anotherNamespace', (err, t) => { /* ... */ });

 

 

위 코드는 i18n 공식 문서에서 가져온 코드인데
네임스페이스 즉 common.json, moduleA.json, moduleB.json을 콜론으로 구분한 다음
원하는 키를 입력하면 번역 값을 가져올 수 있다.


따라서 내가 작성한 아래의 코드는

t(`ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef`)

ex.0123.json에서 4567:89ab:cdef:0123:4567:89ab:cdef 키를 가져와 주세요 
라는 뜻이 되는 거다..
당연히 4567:89ab:cdef:0123:4567:89ab:cdef 라는 키는 없으니 4567:89ab:cdef:0123:4567:89ab:cdef 가 그대로 출력되는 것!

 

해결

i18n config파일에 nsSeparator값을 설정해 주는 방법도 있지만 이 방식은 권장하지 않는다.
예상치 못한 버그가 속출할 수도 있기 때문.

그래서 내가 선택한 방법은 사용하는 곳에서 옵션을 지정해 주는 것이다!

 t(`ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef`, {
              nsSeparator: '',
})

t를 사용하는 곳에서 nsSeparator 옵션을 빈값으로 설정해 주었다.
(false로 설정해도 된다)