vue, i18n 를 불변 object 의 property 에 적용하는 방법

일반적인 template 의 문자열 표시나, script 의 로직에서 문자열을 다국어 처리하는 것은 크게 문제가 되지 않지만, enum 을 구현한 불변 object 나 map 타입으로 구성한 곳에서는 locale 변경에 대해 동적으로 처리하기가 쉽지 않다.

 

몇가지 방법이 있는데, 가장 쉽게 적용할 수 있는 방법은 getter 를 구현하는 것이다. 해당 내용은 아래 두 사이트에서 자세하게 설명하므로 getter 에 대한 설명은 하지 않는다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/get

접근자 - JavaScript | MDN

https://ko.javascript.info/property-accessors

프로퍼티 getter와 setter

 

case1. 선택 value, text 2가지 속성을 가지는 object

const status = [
  {
    value: 'OPEN',
    text: '열림',
  },
  {
    value: 'CLOSED',
    text: '닫힘',
  },
]

위와 같은 상태 목록이 있고, 각각 value 와 text 값이 있을 때 text 부분에 대한 다국어지원을 locale 변경에 따라 동적으로 변경되게 하려면, 아래와 같이 작성한다.

import { $t } from '@/i18n';
// $t = 다국어 변환 메소드

const status = [
  {
    value: 'OPEN',
    get text() {
      return $t('DESC_OPEN');
    },
  },
  {
    value: 'CLOSED',
    get text() {
      return $t('DESC_CLOSED');
    },
  },
]

위와 같이 text property 에 대해서 getter 를 구현하면 text 에 접근하여 값을 사용하려는 시점에서 함수가 수행된 결과를 리턴받을 수 있어, 동적으로 locale 이 변경되는 순간, 원하는 locale 의 문자열을 받을 수 있다.

 

case2. property 의 값이 다국어 전환 대상 문자열인경우

const status = {
  OPEN: '열림',
  CLOSED: '닫힘',
}

위와 같은 경우에도 동일하게 getter 로 구현한다.

import { $t } from '@/i18n';
// $t = 다국어 변환 메소드

const status = {
  get OPEN() {
    return $t('DESC_OPEN');
  },
  get CLOSED() {
    return $t('DESC_CLOSED');
  }
}

콘솔로 로그를 찍어보면

 

 

여담1) 위의 케이스에서 template 에서 사용할 때는, in 문법으로 하나씩 추출하는 경우 value, name 순으로 추출되는 것에 유의한다.

<div :key="propValue" v-for="(propValue, propName) in status">
  {{ propName }} : {{ propValue }}
</div>