Q1: Vue.js에서 필터(Filter)란 무엇인가요?
A1: Vue.js에서 필터는 템플릿 내에서 값을 출력할 때 문자열을 변형하거나 포맷팅하는 데 사용하는 간단한 함수입니다. 주로 사용자에게 보여지는 데이터를 특정 형식으로 표시할 때 사용됩니다.
Q2: Vue 2에서 필터를 어떻게 정의하고 사용하나요?
A2: Vue 2에서는 전역 필터와 로컬 필터를 정의할 수 있습니다.
- 전역 필터 정의:
```js
Vue.filter('capitalize', function(value) {
if (!value) return '';
return value.toString().charAt(0).toUpperCase() + value.slice(1);
});
```
- 템플릿에서 사용:
```html
{{ message | capitalize }}
```
- 로컬 필터 정의 (컴포넌트 내부):
```js
export default {
filters: {
capitalize(value) {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
}
```
Q3: Vue 3에서 필터를 사용할 수 있나요?
A3: Vue 3에서는 필터 기능이 공식적으로 제거되었습니다. 대신에, 메서드나 계산된 속성(computed properties)을 사용하여 비슷한 기능을 구현합니다.
예:
```js
export default {
setup() {
const message = ref('hello');
const capitalize = (value) => {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
};
return { message, capitalize };
}
}
```
템플릿:
```html
{{ capitalize(message) }}
```
Q4: 필터 대신 Vue 3에서는 어떤 대안을 사용하나요?
A4: 주로 다음 중 하나를 사용합니다.
- 메서드(methods): 데이터를 출력할 때 호출하는 함수
- 계산된 속성(computed): 데이터에 종속된 값을 동적으로 계산하여 캐싱
- 커스텀 디렉티브: 복잡한 DOM 변환 시
- 전역 함수 또는 유틸리티 함수: 필요한 위치에서 호출
Q5: 필터 사용 시 주의할 점은 무엇인가요?
A5:
- Vue 3부터는 필터를 더 이상 지원하지 않으므로 기존 Vue 2 코드를 마이그레이션할 때 필터를 메서드나 컴포넌트 내부 함수로 변경해야 합니다.
- 필터는 단순 변환용으로 적합하며, 복잡한 로직은 computed나 methods에서 처리하는 것이 더 효과적입니다.
- 필터를 남용하면 컴포넌트의 재사용성이나 유지보수에 악영향을 줄 수 있습니다.
---
요약하면, Vue 2에서는 `Vue.filter()` 혹은 컴포넌트의 `filters` 옵션을 통해 필터를 정의하고 `|` 파이프 연산자로 템플릿 내에서 변환을 적용하며, Vue 3부터는 필터 기능이 제거되어 메서드나 계산된 속성을 활용하는 방식을 권장합니다.
Vue.js에서 필터는 데이터를 변환하여 템플릿에서 표시할 때 유용하게 사용할 수 있는 기능입니다. 필터는 주로 문자열을 포맷하거나, 날짜를 변환하거나, 숫자를 특정 형식으로 표시하는 등의 작업에 사용됩니다. Vue.js의 필터는 Vue 인스턴스의 데이터에 직접적으로 영향을 미치지 않으며, 오직 템플릿에서 데이터를 표시할 때만 사용됩니다. 필터 사용 방법 1. 필터 정의하기 : Vue.js에서 필터는 `Vue.filter` 메서드를 사용하여 정의할 수 있습니다. 필터는 이름과 함수를 인자로 받습니다. 예를 들어, 문자열을 대문자로 변환하는 필터를 정의할 수 있습니다. ```javascript Vue.filter('uppercase', function(value) { if (!value) return ''; return value.toString().to<a href='https://sangseek.com/sangseeks/UpperCase/ko'>UpperCase</a>(); }); ``` 2. 필터 사용하기 : 필터는 템플릿에서 `|` 기호를 사용하여 적용할 수 있습니다. 위에서 정의한 `uppercase` 필터를 사용하려면 다음과 같이 작성합니다. ```html <div id="app"> <p>이중 중괄호 열기 message | uppercase 이중 중괄호 닫기</p> </div> ``` 여기서 `message`는 Vue 인스턴스의 데이터 속성으로, 필터를 통해 대문자로 변환된 결과가 표시됩니다. 3. 여러 필터 사용하기 : 필터는 여러 개를 연속으로 사용할 수 있습니다. 예를 들어, 문자열을 대문자로 변환한 후, 특정 문자열을 대체하는 필터를 추가할 수 있습니다. ```javascript Vue.filter('replace', function(value, search, replacement) { return value.replace(new RegExp(search, 'g'), replacement); }); ``` 템플릿에서 다음과 같이 사용할 수 있습니다. ```html <p>이중 중괄호 열기 message | uppercase | replace('HELLO', 'HI') 이중 중괄호 닫기</p> ``` 4. 필터에 인자 전달하기 : 필터는 추가 인자를 받을 수 있습니다. 위의 `replace` 필터 예제에서 `search`와 `replacement`는 필터에 전달된 인자입니다. 필터를 사용할 때 인자를 전달하려면 `:` 기호를 사용합니다. ```html <p>이중 중괄호 열기 message | replace('hello', 'hi') 이중 중괄호 닫기</p> ``` 5. 필터의 장점과 단점 : - 장점 : 필터는 코드의 가독성을 높이고, 템플릿에서 데이터를 쉽게 변환할 수 있게 해줍니다. 또한, 재사용성이 높아 여러 곳에서 동일한 변환 로직을 사용할 수 있습니다. - 단점 : 필터는 Vue 3에서 더 이상 권장되지 않으며, Composition API를 사용하는 경우에는 `computed` 속성을 사용하는 것이 더 좋습니다. 필터는 복잡한 로직을 처리하기에는 적합하지 않으며, 성능에 영향을 줄 수 있습니다. Vue 3에서의 필터 사용 Vue 3에서는 필터가 공식적으로 제거되었습니다. 대신, `computed` 속성을 사용하여 데이터를 변환하는 것이 권장됩니다. 예를 들어, 위의 `uppercase` 필터를 `computed` 속성으로 변환할 수 있습니다. ```javascript const app = Vue.createApp({ data() { return { message: 'hello world' }; }, computed: { uppercaseMessage() { return this.message.toUpperCase(); } } }); app.mount(' app'); ``` 템플릿에서는 다음과 같이 사용할 수 있습니다. ```html <p>이중 중괄호 열기 uppercaseMessage 이중 중괄호 닫기</p> ``` 결론 Vue.js에서 필터는 데이터를 변환하여 템플릿에서 표시하는 데 유용한 도구입니다. 그러나 Vue 3에서는 필터가 제거되었으므로, `computed` 속성을 사용하여 데이터를 변환하는 것이 더 바람직합니다. 필터를 사용하던 기존 Vue 2 사용자들은 이러한 변화를 인지하고, 새로운 방식으로 데이터 변환을 구현해야 합니다.
