Vue.js에서 사용자 정의 디렉티브를 만드는 방법은 무엇인가요?

Q: Vue.js에서 사용자 정의 디렉티브란 무엇인가요?
A: 사용자 정의 디렉티브는 Vue가 기본으로 제공하는 `v-if`, `v-show` 같은 디렉티브 외에 개발자가 직접 특정 DOM 조작 로직을 정의해 사용할 수 있는 기능입니다. 특정 DOM 요소에 대해 반복적으로 동작하는 커스텀 기능을 추가할 때 유용합니다.

Q: Vue 3에서 사용자 정의 디렉티브는 어떻게 작성하나요?
A: 사용자 정의 디렉티브는 객체 형태로 정의하며, 주로 `beforeMount`, `mounted`, `updated`, `beforeUnmount` 라이프사이클 훅을 사용합니다. 예를 들어:
```js
const MyDirective = {
mounted(el, binding) {
// 엘리먼트에 초기 동작 적용
},
updated(el, binding) {
// 데이터가 변경될 때 동작
}
}
```
이후 컴포넌트나 앱에 등록해 사용할 수 있습니다.

Q: 사용자 정의 디렉티브를 전역으로 등록하는 방법은?
A: Vue 애플리케이션 생성 시 다음과 같이 전역 등록합니다.
```js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('focus', {
mounted(el) {
el.focus()
}
})

app.mount(' app')
```
이후 템플릿에서 `v-focus`로 사용 가능합니다.

Q: 사용자 정의 디렉티브를 지역적으로 등록하는 방법은?
A: 컴포넌트 내부 `directives` 옵션에 디렉티브 객체를 지정합니다.
```js
export default {
directives: {
focus: {
mounted(el) {
el.focus()
}
}
}
} ```
템플릿에서 `v-focus`로 사용할 수 있습니다.

Q: 디렉티브 훅 함수에서 제공되는 인자는 무엇인가요?
A: 기본적으로 세 가지 인자를 받습니다.
- `el`: 디렉티브가 적용되는 DOM 엘리먼트
- `binding`: 디렉티브 값, 인자, 모드 등 정보를 담은 객체
- `vnode`: 가상 DOM 노드 (필요시 사용)

Q: `binding` 객체는 어떤 속성을 가졌나요?
A: 주요 속성은 다음과 같습니다.
- `value`: 디렉티브에 지정된 값 (ex: `v-my="value"`의 value)
- `oldValue`: 이전 값, `updated` 훅에서 비교 시 사용
- `arg`: 인자 (ex: `v-my:arg`)
- `modifiers`: 수식어 객체 (ex: `v-my.modifier1.modifier2`)
- `instance`: 현재 컴포넌트 인스턴스

Q: 간단한 예시: 엘리먼트에 자동 포커스를 주는 디렉티브 작성법은?
A:
```js
app.directive('focus', {
mounted(el) {
el.focus()
}
})
```
템플릿에서 `` 형태로 사용하면 해당 input이 마운트 될 때 자동으로 포커스됩니다.

Q: 사용자 정의 디렉티브 안에서 외부 상태(예: 컴포넌트 데이터)를 참조할 수 있나요?
A: 네, `binding.instance`로 컴포넌트 인스턴스에 접근해 데이터나 메서드에 접근할 수 있습니다. 예:
```js
mounted(el, binding) {
console.log(binding.instance.msg)
}
```

Q: Vue 2와 3에서 사용자 정의 디렉티브 작성법에 차이가 있나요?
A: 구조는 유사하지만, Vue 3에서는 훅 이름이 변경(`bind` → `beforeMount`, `inserted` → `mounted`)되고 Vue 3 앱 인스턴스에 `.directive()`로 등록하는 방식이 추가되었습니다. Vue 2는 `Vue.directive()` 또는 컴포넌트의 `directives` 옵션에 객체를 넣습니다.

Q: 사용자 정의 디렉티브를 사용할 때 주의사항이 있나요?
A:
- 디렉티브는 DOM 조작에 초점이 맞춰져 있으므로, 상태 반영 로직은 컴포넌트나 Vue 반응성 시스템을 활용하는 것이 권장됩니다.
- 라이프사이클 훅에 따라 적절히 정리(clean up)를 해줘야 메모리 누수 방지에 도움이 됩니다.
- 너무 복잡한 로직은 컴포넌트로 분리하는 것이 바람직합니다.

---

위 내용은 Vue.js에서 사용자 정의 디렉티브의 개념부터 작성법, 활용법, 주의사항까지 상세하게 설명한 FAQ입니다.

Vue.js에서 사용자 정의 디렉티브를 만드는 것은 Vue의 강력한 기능 중 하나로, 특정 DOM 요소에 대한 동작을 정의할 수 있습니다. 사용자 정의 디렉티브를 사용하면 Vue의 기본 디렉티브(v-if, v-for, v-bind 등) 외에도 자신만의 동작을 추가할 수 있습니다. 아래에서는 Vue.js에서 사용자 정의 디렉티브를 만드는 방법에 대해 자세히 설명하겠습니다. 1. 사용자 정의 디렉티브의 기본 구조 Vue.js에서 사용자 정의 디렉티브는 `Vue.directive` 메서드를 사용하여 등록합니다. 이 메서드는 디렉티브의 이름과 해당 디렉티브의 동작을 정의하는 객체를 인자로 받습니다. ```javascript Vue.directive('my-directive', { // 생명주기 훅 bind(el, binding, vnode) { // 디렉티브가 바인딩될 때 호출 }, inserted(el, binding, vnode) { // 엘리먼트가 DOM에 삽입될 때 호출 }, update(el, binding, vnode, oldVnode) { // 엘리먼트가 업데이트될 때 호출 }, componentUpdated(el, binding, vnode, oldVnode) { // 컴포넌트가 업데이트된 후 호출 }, unbind(el, binding, vnode) { // 디렉티브가 언바인딩될 때 호출 } }); ``` 2. 디렉티브 생명주기 훅 사용자 정의 디렉티브는 여러 생명주기 훅을 가집니다. 각 훅은 특정 시점에 호출되며, 다음과 같은 역할을 합니다: - bind : 디렉티브가 처음 바인딩될 때 호출됩니다. 이 시점에서 초기 설정을 할 수 있습니다. - inserted : 엘리먼트가 DOM에 삽입된 후 호출됩니다. 이곳에서 DOM 조작을 수행할 수 있습니다. - update : 데이터가 변경되어 엘리먼트가 업데이트될 때 호출됩니다. 이곳에서 변경된 데이터를 기반으로 DOM을 업데이트할 수 있습니다. - componentUpdated : 컴포넌트가 업데이트된 후 호출됩니다. 이곳에서도 DOM을 업데이트할 수 있습니다. - unbind : 디렉티브가 언바인딩될 때 호출됩니다. 이곳에서 이벤트 리스너를 제거하거나 정리 작업을 수행할 수 있습니다. 3. 사용자 정의 디렉티브 예제 아래는 마우스를 올렸을 때 배경색을 변경하는 사용자 정의 디렉티브의 예입니다. ```javascript Vue.directive('hover-bg', { bind(el, binding) { el.style.transition = 'background-color 0.3s'; el.<a href='https://sangseek.com/sangseeks/addEventListener/ko'>addEventListener</a>('mouseenter', () => { el.style.backgroundColor = binding.value || 'yellow'; // 디렉티브의 값으로 배경색 설정 }); el.addEventListener('mouseleave', () => { el.style.backgroundColor = ''; // 마우스가 떠날 때 배경색 초기화 }); }, unbind(el) { // 이벤트 리스너 제거 el.removeEventListener('mouseenter'); el.removeEventListener('mouseleave'); } }); ``` 이 디렉티브를 사용하려면 Vue 인스턴스의 템플릿에서 다음과 같이 사용할 수 있습니다. ```html <div v-hover-bg="'lightblue'">마우스를 올려보세요!</div> ``` 4. 디렉티브의 인자와 수정자 사용자 정의 디렉티브는 인자와 수정자를 사용할 수 있습니다. 인자는 디렉티브의 값으로 전달되는 데이터를 의미하고, 수정자는 디렉티브의 동작을 변경하는 데 사용됩니다. 인자 사용 예제 ```javascript Vue.directive('color', { bind(el, binding) { el.style.color = binding.value; // 인자로 전달된 색상으로 텍스트 색상 설정 } }); ``` 사용 예: ```html <p v-color="'red'">이 텍스트는 빨간색입니다.</p> ``` 수정자 사용 예제 수정자는 디렉티브 이름 뒤에 점(.)으로 구분하여 사용할 수 있습니다. ```javascript Vue.directive('text', { bind(el, binding, vnode) { el.textContent = binding.value; if (binding.modifiers.uppercase) { el.textContent = el.textContent.to<a href='https://sangseek.com/sangseeks/UpperCase/ko'>UpperCase</a>(); // uppercase 수정자가 있을 경우 대<a href='https://sangseek.com/sangseeks/문자/ko'>문자</a>로 변환 } } }); ``` 사용 예: ```html <p v-text.uppercase="'hello'"></p> <!-- 이 텍스트는 HELLO로 표시됩니다. --> ``` 5. 결론 Vue.js에서 사용자 정의 디렉티브를 만드는 것은 매우 유용한 기능입니다. 이를 통해 특정 DOM 요소에 대한 동작을 쉽게 정의하고 재사용할 수 있습니다. 디렉티브의 생명주기 훅을 활용하여 다양한 동작을 구현할 수 있으며, 인자와 수정자를 통해 더욱 유연한 사용이 가능합니다. 이러한 기능을 통해 Vue.js 애플리케이션의 기능성을 확장하고, 코드의 재사용성을 높일 수 있습니다.