Vue.js에서 커스텀 디렉티브를 만드는 방법은 무엇인가요?

Q1: Vue.js에서 커스텀 디렉티브란 무엇인가요?
A1: 커스텀 디렉티브는 Vue 컴포넌트 템플릿 내에서 HTML 요소에 특별한 동작을 추가할 수 있는 사용자 정의 지시자입니다. 기본 제공 디렉티브(v-if, v-for 등) 외에 개발자가 직접 필요한 기능을 구현할 때 사용합니다.

---

Q2: Vue 3에서 커스텀 디렉티브를 어떻게 등록하나요?
A2: Vue 3에서는 `app.directive` 메서드를 사용해 전역 디렉티브를 등록합니다.
예시:
```js
const app = Vue.createApp({ /* ... */ });

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

---

Q3: 커스텀 디렉티브의 기본 훅은 무엇이 있나요?
A3: Vue 3 커스텀 디렉티브 훅은 다음과 같습니다:
- `created(el, binding, vnode, prevVnode)`: 디렉티브가 요소에 바인딩될 때 호출 (DOM 삽입 전)
- `beforeMount(el, binding, vnode, prevVnode)`: 요소가 부모에 삽입되기 직전
- `mounted(el, binding, vnode, prevVnode)`: 요소가 DOM에 삽입된 후
- `beforeUpdate(el, binding, vnode, prevVnode)`: 컴포넌트가 업데이트 되기 전
- `updated(el, binding, vnode, prevVnode)`: 컴포넌트가 업데이트 된 후
- `beforeUnmount(el, binding, vnode, prevVnode)`: 요소가 언마운트 되기 직전
- `unmounted(el, binding, vnode, prevVnode)`: 요소가 언마운트 된 후

---

Q4: 디렉티브 훅 함수에서 받을 수 있는 인자는 무엇인가요?
A4: 훅 함수들은 네 가지 인자를 받습니다:
- `el`: 디렉티브가 적용된 실제 DOM 요소
- `binding`: 객체로 디렉티브 사용 시 전달된 값, 인수, modifiers 등을 포함
- `vnode`: Vue가 렌더링하는 가상 노드
- `prevVnode`: 이전 가상 노드 (업데이트 훅에서)

---

Q5: 디렉티브 내에서 `binding` 객체의 주된 속성은 무엇인가요?
A5: 주요 속성은 다음과 같습니다:
- `value`: 디렉티브에 전달된 값 (예: `v-my-directive="123"`일 경우 123)
- `oldValue`: 이전 값 (업데이트 시)
- `arg`: 인수 (예: `v-my-directive:foo` 에서 "foo")
- `modifiers`: 부가 옵션 (예: `v-my-directive.foo.bar` 에서 `{ foo: true, bar: true }`)
- `instance`: 현재 컴포넌트 인스턴스

---

Q6: Vue 2에서 커스텀 디렉티브를 만드는 방법은 어떻게 다르나요?
A6: Vue 2에서는 `Vue.directive`를 사용하여 전역 디렉티브를 등록하거나, 컴포넌트 옵션에서 `directives` 속성으로 지역 디렉티브를 등록합니다. 예시:
```js
Vue.directive('focus', {
inserted(el) {
el.focus();
}
});
```

---

Q7: 지역 디렉티브는 어떻게 등록하나요?
A7: 컴포넌트 내에서 `directives` 옵션에 객체 형태로 전달합니다.
```js
export default {
directives: {
focus: {
mounted(el) { el.focus(); }
}
}
}
```
해당 컴포넌트 안에서만 사용할 수 있습니다.

---

Q8: 커스텀 디렉티브 예제: 요소가 화면에 삽입되면 자동으로 포커스하는 디렉티브를 만들어주세요.
A8: Vue 3 예제:
```js
app.directive('focus', {
mounted(el) {
el.focus();
}
});
```
템플릿에서: ``

---

Q9: 디렉티브에 인수와 modifiers를 사용하는 방법은?
A9: 템플릿에 예를 들어 `v-my-directive:foo.bar.baz="value"` 가 있다면,
- `binding.arg`는 `"foo"`
- `binding.modifiers`는 `{ bar: true, baz: true }`
훅 내에서 조건 분기할 수 있습니다.

---

Q10: 언제 커스텀 디렉티브를 사용해야 하나요?
A10: DOM 조작, 이벤트 직접 바인딩, 서드파티 라이브러리 연동 등 컴포넌트 내부 로직으로 관리하기 어렵거나, 재사용해야 하는 DOM 중심 기능을 구현할 때 사용하면 효과적입니다.

---

요약하자면, Vue.js에서 커스텀 디렉티브는 `app.directive` 또는 컴포넌트 내 `directives` 옵션을 통해 등록하고, 여러 라이프사이클 훅에서 DOM 요소와 바인딩 값을 조작하며 원하는 기능을 추가할 수 있습니다.

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에 삽입된 후 호출됩니다. <a href='https://sangseek.com/sangseeks/DOM 조작/ko'>DOM 조작</a>이 필요한 경우 유용합니다. - update : 데이터가 변경되어 엘리먼트가 업데이트될 때 호출됩니다. - componentUpdated : 컴포넌트가 업데이트된 후 호출됩니다. 자식 컴포넌트의 업데이트 후에 필요한 작업을 수행할 수 있습니다. - unbind : 디렉티브가 언바인딩될 때 호출됩니다. 리소스를 정리하는 데 사용됩니다. 3. 디렉티브 사용 예제 아래는 간단한 커스텀 디렉티브를 만들어서 요소의 배경색을 변경하는 예제입니다. ```javascript Vue.directive('color', { bind(el, binding) { el.style.backgroundColor = binding.value; }, update(el, binding) { el.style.backgroundColor = binding.value; } }); // Vue 인스턴스 생성 new Vue({ el: ' app', data: { color: 'red' } }); ``` HTML에서 이 디렉티브를 사용하는 방법은 다음과 같습니다: ```html <div id="app"> <div v-color="color">이 배경색은 데이터에 따라 변경됩니다.</div> <button @click="color = 'blue'">파란색으로 변경</button> <button @click="color = 'green'">초록색으로 변경</button> </div> ``` 4. 디렉티브의 인자와 수정자 디렉티브는 인자와 수정자를 받을 수 있습니다. 인자는 디렉티브의 이름 뒤에 `:`로 구분하여 사용할 수 있으며, 수정자는 `.`으로 구분하여 사용할 수 있습니다. ```javascript Vue.directive('my-directive', { bind(el, binding) { if (binding.arg === 'color') { el.style.color = binding.value; } if (binding.modifiers.bold) { el.style.fontWeight = 'bold'; } } }); ``` HTML에서 사용 예: ```html <p v-my-directive:color="'red'" v-my-directive.bold>이 텍스트는 빨간색이고 굵게 표시됩니다.</p> ``` 5. 결론 Vue.js에서 커스텀 디렉티브를 만드는 것은 매우 유용하며, 특정 DOM 요소에 대한 동작을 캡슐화하여 재사용할 수 있게 해줍니다. 디렉티브의 생명주기 훅을 활용하여 다양한 상황에 맞게 동작을 정의할 수 있으며, 인자와 수정자를 통해 더욱 유연한 사용이 가능합니다. 이러한 기능을 통해 Vue.js <a href='https://sangseek.com/sangseeks/애플/ko'>애플</a>리케이션의 유지보수성과 확장성을 높일 수 있습니다.