[Vue] filter 기능을 통해 특정 형식으로 데이터 표현하기 (Vue filter, filters)

Vue를 통해 프론트를 개발할 때 데이터를 표현하는 과정을 빼놓을 순 없습니다. 특히 화폐 단위 형식(₩100,000), 날짜 형식(2022/02/22) 등 여러 가지의 데이터 포멧이 존재하고 이를 적용해야 할 때가 있습니다.

그런데 가져온 데이터를 가지고 매번 프론트에 표현할 때 형식 변환 메소드를 가지고 계속 적용하며 사용하는 것은 비효율적입니다.

methods: {
    getMoneyData(accountId) {
        axios.get([URL 입력])
            .then((response) => {
                this.money = convertMoneyFormat(response.data.currentMoney);
            })
            .catch((error) => {
                //...
            });
    },
    convertMoneyFormat(value) {
        if (value === null) {
            return 0
        }

        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
}

이런 식으로 사용하면 money 데이터를 다루는 다른 메소드에서도 convertMoneyFormat을 가져다 변환해주는 작업이 필요할 것입니다.

Vue에서는 이것을 세련되게 표현할 수 있도록 filter api를 제공해줍니다.

 

📌 filter 설정

filter는 지역 컴포넌트에 적용하는 방법과 전역으로 적용하는 방법이 있습니다.

Local filter 적용

data() {
  return {
    amount: 200000
  }
},
filters: {
  currencyFormat(value) {
      if (value === null) {
          return 0
      }

      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  },
  monetaryUnitOfKorea(value) {
      return `${value} 원`;
  }
}

Vue 지역 객체 안에 filters라는 옵션을 추가할 수 있습니다. 
vue component 안에 filters 옵션에 filtering할 여러 기능들을 function 형태로 정의하면 됩니다. 인자로 받는 value는 filter 대상을 가리킵니다.

Global filter 적용

Vue.filter('currencyFormat', function(value) {
  if (value === null) {
      return 0
  }

  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

Vue.filter('monetaryUnitOfKorea', function(value) {
  return `${value} 원`;
});

Vue를 사용하는 곳에 전역적으로 filter를 등록해놓고 사용하고 싶을 때 설정하는 방법입니다.

 

📌 HTML 요소에 filter 적용해서 데이터 표현

Vue 공식 문서에 filter를 적용할 수 있는 곳은 mustache interpolations({{  ...  }}) and v-bind expressions 라고 명시하고 있습니다.

 

<div>{{ amount | currency | monetaryUnitOfKorea }}</div>

200,000 원

먼저 mustache라고 하는 중괄호 표현에서 filter 사용하는 방법입니다. 가장 왼쪽에 표현 대상인 데이터를 놓고 오른쪽으로 적용하고자 하는 filter를 표시하면 됩니다. filter 적용하는 중간중간에  |  특수기호 잊으면 안됩니다.

filter는 chaining 기능도 있기 때문에 오른쪽으로 나열함으로써 차례차례로 각 filter의 기능들을 연달아 적용할 수 있습니다.

<input 
  type="text" 
  :value="amount | currencyFormat | monetaryUnitOfKorea" 
  disabled>

두 번째로 v-bind에 적용하는 법입니다. mustache와 비슷하게 사용하면 되는데 v-bind에서는 mustache 없이만 사용하면 됩니다.

 

이런 식으로 filter 기능을 미리 설정해놓고 사용하고 싶은 곳에만 filter 표현식으로 적용해서 사용하면 되기에 편리하게 사용할 수 있습니다. 로직 중간중간에 데이터 처리하는 과정이 필요없어지게 됩니다.

협업하여 개발할 때도 어떤 filter 기능을 적용했는지 한 눈에 들어와서 여러모로 좋은 듯 합니다.