### 커스텀 디렉티브의 선언과 사용
Vue 3.0에서 커스텀 디렉티브를 선언하는 방법은 두 가지로 나눌 수 있습니다: 전역 디렉티브와 지역 디렉티브입니다.
#### 전역 디렉티브 선언
전역 디렉티브는 모든 컴포넌트에서 사용할 수 있도록 하는 방법입니다.
```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
// 창을 부드럽게 열고 닫는 애니메이션을 추가하는 디렉티브
const app = createApp(App);
app.directive('focus', {
mounted(el) {
el.focus();
}
});
app.mount('#app');
```
위의 코드에서 'focus'라는 이름의 전역 디렉티브를 생성했습니다. 이 디렉티브는 요소가 마운트될 때 자동으로 포커스를 설정합니다.
#### 지역 디렉티브 선언
지역 디렉티브는 특정 컴포넌트 내에서만 사용할 수 있습니다.
```javascript
// MyComponent.vue
<template>
<input v-focus />
</template>
<script>
export default {
directives: {
focus: {
mounted(el) {
el.focus();
}
}
}
};
</script>
```
이 경우 'focus' 디렉티브는 MyComponent에서만 사용할 수 있는 형태로 적용되었습니다.
### 커스텀 디렉티브를 적용할 적합한 상황
1. **서드파티 라이브러리와 통합할 때**: 특정 HTML 요소에 대하여 서드파티 JavaScript 라이브러리를 적용해야 한다면, 그에 따라 디렉티브를 통해 DOM을 직접 업데이트할 수 있습니다.
2. **애니메이션 효과 추가**: 디렉티브를 사용하여 특정 이벤트에 따라 애니메이션 효과를 추가할 수 있습니다. 예를 들어, 요소가 페이지에 나타날 때 페이드 인 효과를 추가할 수 있습니다.
```javascript
app.directive('fade', {
mounted(el) {
el.style.transition = 'opacity 0.5s';
el.style.opacity = 0;
setTimeout(() => {
el.style.opacity = 1;
}, 50);
}
});
```
3. **효율적인 DOM 요소의 조건부 업데이트**: v-if 또는 v-show로 해결되지 않는 복잡한 조건을 처리할 때, 커스텀 디렉티브를 사용하여 직접 조건에 따른 요소의 업데이트를 수행할 수 있습니다.
이처럼 Vue3.0의 커스텀 디렉티브는 특수한 요구 사항을 만족시키기 위해 활용할 수 있는 강력한 도구이며, 전역 또는 지역 디렉티브의 적용을 통해 프로젝트의 필요에 맞춰 유연하게 사용할 수 있습니다.