[Vue] Filter로 데이터 필터링하기

프론트 개발 시 데이터를 변환하여 표현하는 과정은 필수적이다.

특히 화폐 단위나 날짜 형식과 같은 데이터 포맷을 적용할 때에는 이를 위한 함수를 생성하고 적용하기 마련이다.

 

이를 효율적으로 작업할 수 있도록 Vue.js는 데이터를 변환하고 필터링하는 데 유용한 Filter 기능을 제공한다.(정확히는 제공했다..)

일반적으로 텍스트 형식으로 데이터를 변환하거나, 데이터를 필터링하여 특정 조건에 맞는 항목을 표시하는 데 사용된다.

 

Filter는 전역적으로 등록되어 어디서든 사용 가능하다는 장점이 있다.

 

---

 

1. 사용 방법

filter를 선언하는 데에는 아래의 3가지 방법이 있다.

 

(1) 로컬 필터

컴포넌트 옵션에서 로컬 필터를 정의할 수 있다.

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

 

 

(2) 전역 필터

또는 다음과 같이 Vue 인스턴스를 생성하기 전에 전역 필터를 정의할 수 있다.

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

 

(3) script

javascript에서 export함으로써 전역적으로 import 후 사용 또한 가능하다.

  export const capitalize = (value) => {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }

 

등록한 filter는 Vue 컴포넌트의 템플릿에서 | 파이프라인 기호를 사용하여 데이터에 적용할 수 있다.

예를 들어 가격에 세자릿수마다 ,를 추가하는 addComma를 적용하고 싶다면 아래와 같이 사용할 수 있다.

<div> {{ price | addComma }} </div>

 

2. 파라미터 전달

추가적인 파라미터를 전달하여 더 동적으로도 사용 가능하다.

<div> {{ price | addUnit('$') }} </div>

 

예를 들어 가격에 ,를 추가하는 것뿐만 아니라 원하는 단위까지 뒤에 붙이고 싶다면

위와 같이 파라미터를 전달받아 처리해줄 수도 있다.

 

3. Filter 체인

filter는 여러 개를 연결하여 사용할 수 있는데 이를 Filter 체인이라고 한다.

여러개의 Filter를 적용할 경우, 왼쪽에서 오른쪽 순서대로 적용된다.

<div> {{ price | getState | addComma | addUnit('$') }} </div>

 

위 예제는 설명을 위해 각자 진행하도록 해봤는데

해당 가격이 양수인지 음수인지 여부를 판별하여 앞에 + 혹은 - 단위를 붙여주고

세자릿수마다 ,를 추가한 뒤 $ 단위를 추가하는 순서대로 진행된다.

 

4. Vue3에서는...

그러나 Vue3에서부터 Filter가 제거되어 앞으로는 computed나 methods를 활용하여 구현하는 것을 권장한다.

뒤늦게 알아 이미 제거되었으나 알게 된 것에 대해 정리하고자 글로 작성해보았다.

 

computed나 methods에 filter용 함수를 만들고 | 파이프라인 기호로 적용하는 걸 기억하자!