Vue.js에서 Filter 사용법과 활용 방법

Vue.js에서 Filter 사용법과 활용 방법

 

Vue.js는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크로, 데이터를 처리하고 표시하는 데 많은 도움을 줍니다. Vue.js에서는 Filter라는 기능을 제공하여 데이터를 변환하고 필터링하는 데 사용할 수 있습니다. 이 글에서는 Vue.js에서 Filter를 사용하는 방법과 다양한 활용 예시에 대해 알아보겠습니다.

1. Filter의 개념과 작동 방식
Filter는 Vue.js에서 데이터 변환을 위해 사용되는 함수입니다. 일반적으로 텍스트 형식으로 데이터를 변환하거나, 데이터를 필터링하여 특정 조건에 맞는 항목만 표시하는 데 사용됩니다. Filter는 Vue 컴포넌트의 템플릿에서 사용되며, 데이터 바인딩과 함께 사용될 수 있습니다.

Filter는 전역적으로 등록되어 Vue 애플리케이션 어디에서든 사용할 수 있습니다. Vue 애플리케이션의 Vue.filter 메서드를 사용하여 Filter를 등록할 수 있습니다. Filter는 첫 번째 인수로 Filter의 이름을, 두 번째 인수로 Filter 함수를 받습니다.

2. Filter 등록 및 사용 예제

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

// Filter 사용
<div>{{ message | capitalize }}</div>

위 예제에서는 capitalize라는 Filter를 등록하고 사용하는 방법을 보여줍니다. capitalize Filter 함수는 문자열을 받아 첫 글자를 대문자로 변환하여 반환합니다. 이렇게 등록된 Filter는 Vue 컴포넌트의 템플릿에서 | 파이프라인 기호를 사용하여 데이터에 적용할 수 있습니다.

3. Filter 파라미터 전달하기
Filter는 추가적인 파라미터를 전달하여 더 동적으로 사용할 수 있습니다. 파이프라인 기호 다음에 콜론으로 구분하여 파라미터를 전달할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

// Filter 등록
Vue.filter('currency', function(value, currencySymbol) {
  if (!value) return ''
  return currencySymbol + value.toFixed(2)
})

// Filter 사용
<div>{{ price | currency('₩') }}</div>

위 예제에서는 currency라는 Filter를 등록하고 사용하는 방법을 보여줍니다. currency Filter 함수는 가격 값을 받아 원화 기호 '₩'와 함께 소수점 2자리까지 표시하는 문자열을 반환합니다. 파라미터로 전달한 '₩'는 Filter 함수 내에서 currencySymbol로 사용됩니다.

4. Filter 체인
Filter는 여러 개를 연결하여 사용할 수도 있습니다. 이를 Filter 체인이라고 합니다. 여러 개의 Filter를 적용할 경우, 템플릿에서 왼쪽에서 오른쪽으로 순서대로 적용됩니다.

// Filter 등록
Vue.filter('uppercase', function(value) {
  if (!value) return ''
  return value.toString().toUpperCase()
})

Vue.filter('limit', function(value, limit) {
  if (!value) return ''
  return value.slice(0, limit)
})

// Filter 체인 사용
<div>{{ message | uppercase | limit(10) }}</div>

위 예제에서는 uppercase와 limit라는 두 개의 Filter를 등록하고 사용하는 방법을 보여줍니다. uppercase Filter는 문자열을 모두 대문자로 변환하고, limit Filter는 문자열을 지정한 길이로 제한합니다. 템플릿에서는 파이프라인 기호를 사용하여 두 개의 Filter를 순차적으로 적용할 수 있습니다.

5. Filter 재사용성과 커스텀 옵션
Filter는 여러 컴포넌트에서 재사용할 수 있으며, Vue 애플리케이션 전역에서 정의된 Filter를 사용할 수 있습니다. 또한 Filter에 커스텀 옵션을 추가하여 재사용성을 높일 수도 있습니다.

// 커스텀 옵션을 가진 Filter 등록
Vue.filter('truncate', function(value, length, omission) {
  if (!value) return ''
  if (value.length <= length) return value
  return value.slice(0, length) + (omission || '...')
})

// Filter 사용
<div>{{ description | truncate(100, '... read more') }}</div>

위 예제에서는 truncate라는 Filter를 등록하고 사용하는 방법을 보여줍니다. truncate Filter 함수는 문자열을 지정한 길이로 자르고, 생략 기호를 추가하여 반환합니다. 템플릿에서는 truncate Filter에 length와 omission 두 개의 커스텀 옵션을 전달하여 사용할 수 있습니다.

마무리
이 글에서는 Vue.js에서 Filter를 사용하는 방법과 다양한 활용 예시에 대해 알아보았습니다. Filter는 데이터를 변환하고 필터링하는 데 유용한 도구로, Vue.js 애플리케이션에서 강력하게 활용할 수 있습니다. Filter를 사용하여 데이터를 원하는 형식으로 표시하고, 조건에 맞는 데이터만 필터링하여 사용자에게 더 나은 경험을 제공해보세요.