Q1. Vue.js에서 커스텀 이벤트란 무엇인가요?
A1. 커스텀 이벤트는 컴포넌트 간에 사용자 정의 이벤트를 만들어 부모 컴포넌트로 데이터를 전달하거나 특정 동작을 알릴 때 사용하는 이벤트입니다. 기본 HTML 이벤트가 아닌 개발자가 직접 정의한 이벤트 이름을 사용할 수 있습니다.
Q2. 커스텀 이벤트를 어떻게 생성하나요?
A2. 자식 컴포넌트에서 `this.$emit('이벤트명', 데이터)` 메서드를 호출하여 커스텀 이벤트를 발생시킵니다. `'이벤트명'`은 개발자가 정의한 이벤트 이름이며, 두 번째 인자는 부모에게 전달할 추가 데이터입니다.
```vue
```
Q3. 부모 컴포넌트에서 커스텀 이벤트를 어떻게 감지하나요?
A3. 부모 컴포넌트의 자식 컴포넌트 태그에서 이벤트명을 `v-on` 디렉티브(`@이벤트명`)로 감지할 수 있습니다.
```vue
```
```js
methods: {
handleMyEvent(payload) {
console.log(payload.message); // Hello Parent!
}
}
```
Q4. Vue 3에서는 커스텀 이벤트 사용법이 다르나요?
A4. Vue 3에서도 기본적으로 `this.$emit()`를 사용하며, 부모가 `@이벤트명`으로 수신하는 방식은 동일합니다. 다만 Composition API를 쓸 때 setup 함수 내에서 `emit` 함수를 인자로 받아서 사용합니다.
```js
export default {
setup(props, { emit }) {
const notify = () => {
emit('my-event', 'Data from setup');
};
return { notify };
}
}
```
Q5. 커스텀 이벤트명에 규칙이 있나요?
A5. 이벤트명은 소문자 및 카멜케이스(camelCase)로 작성할 수 있으며, HTML에서 이벤트를 등록할 때는 케밥케이스(kebab-case) 형식으로 바꿔야 합니다.
예) `myEvent` → 템플릿에서 `@my-event="handler"`
Q6. Vue 템플릿 외부에서 `this.$emit`을 사용할 수 있나요?
A6. `this.$emit`은 컴포넌트 인스턴스 내에서만 동작하므로, 일반 JS 파일이나 컴포넌트 외부에서는 직접 사용할 수 없습니다. 컴포넌트 간 통신이 필요하면 Vuex, Pinia, 또는 이벤트 버스 같은 다른 방식을 고려해야 합니다.
Q7. 여러 개의 인자를 함께 전달할 수 있나요?
A7. 네, `$emit`의 두 번째 인자로 여러 변수를 배열이나 객체로 묶어 전달하는 것이 일반적입니다.
```js
this.$emit('my-event', { id: 1, name: 'Vue' });
```
부모는 다음처럼 받습니다.
```js
handleMyEvent(payload) {
console.log(payload.id, payload.name);
}
```
Q8. 커스텀 이벤트를 사용하는 이유는 무엇인가요?
A8. 컴포넌트 간 명확한 의사소통과 관심사 분리를 위해서입니다. 자식 컴포넌트가 부모에게 직접 데이터를 요청하지 않고 이벤트로 필요한 정보를 전달해 유지보수와 재사용성을 높입니다.
---
이상이 Vue.js에서 커스텀 이벤트를 사용하는 기본적인 FAQ입니다.
Vue.js에서 커스텀 이벤트는 컴포넌트 간의 통신을 위한 강력한 도구입니다. 특히 부모와 자식 컴포넌트 간의 데이터 흐름을 관리하는 데 유용합니다. 커스텀 이벤트를 사용하면 자식 컴포넌트가 부모 컴포넌트에 특정 이벤트를 알릴 수 있으며, 이를 통해 부모 컴포넌트가 적절한 반응을 할 수 있습니다. 아래에서는 Vue.js에서 커스텀 이벤트를 사용하는 방법에 대해 자세히 설명하겠습니다. 1. 커스텀 이벤트의 기본 개념 Vue.js에서 커스텀 이벤트는 `this.$emit` 메서드를 사용하여 발생시킬 수 있습니다. 자식 컴포넌트에서 이벤트를 발생시키면, 부모 컴포넌트는 해당 이벤트를 수신하고 처리할 수 있습니다. 이 방식은 Vue의 단방향 데이터 흐름을 유지하면서도 컴포넌트 간의 상호작용을 가능하게 합니다. 2. 커스텀 이벤트 생성하기 자식 컴포넌트에서 커스텀 이벤트를 생성하려면, `this.$emit` 메서드를 사용합니다. 이 메서드는 두 개의 인자를 받을 수 있습니다: 이벤트 이름과 전달할 데이터입니다. ```javascript // ChildComponent.vue <template> <button @click="notifyParent">Click me</button> </template> <script> export default { methods: { notifyParent() { this.$emit('custom-event', 'Hello from Child!'); } } } </script> ``` 위의 예제에서 `notifyParent` 메서드는 버튼 클릭 시 `custom-event`라는 이름의 커스텀 이벤트를 발생시키고, 문자열 `'Hello from Child!'`를 부모에게 전달합니다. 3. 부모 컴포넌트에서 이벤트 수신하기 부모 컴포넌트는 자식 컴포넌트를 사용할 때, `v-on` 디렉티브 또는 `@` 단축 구문을 사용하여 커스텀 이벤트를 수신할 수 있습니다. ```javascript // <a href='https://sangseek.com/sangseeks/ParentComponent/ko'>ParentComponent</a>.vue <template> <div> <ChildComponent @custom-event="handleCustomEvent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(message) { console.log(message); // "Hello from Child!" } } } </script> ``` 위의 예제에서 `ParentComponent`는 `ChildComponent`의 `custom-event`를 수신하고, `handleCustomEvent` 메서드를 호출합니다. 이 메서드는 자식 컴포넌트에서 전달된 메시지를 콘솔에 출력합니다. 4. 여러 개의 이벤트 처리하기 하나의 자식 컴포넌트에서 여러 개의 커스텀 이벤트를 발생시킬 수도 있습니다. 각 이벤트는 서로 다른 이름을 가질 수 있으며, 부모 컴포넌트에서 각각의 이벤트를 처리할 수 있습니다. ```javascript // ChildComponent.vue methods: { notifyParent() { this.$emit('custom-event', 'Hello from Child!'); this.$emit('another-event', 'Another message from Child!'); } } ``` ```javascript // ParentComponent.vue <template> <div> <ChildComponent @custom-event="handleCustomEvent" @another-event="handleAnotherEvent" /> </div> </template> methods: { handleCustomEvent(message) { console.log(message); }, handleAnotherEvent(message) { console.log(message); } } ``` 5. 이벤트 버스(Event Bus) 사용하기 Vue.js에서는 이벤트 버스를 사용하여 비슷한 방식으로 여러 컴포넌트 간의 통신을 할 수 있습니다. 이벤트 버스는 Vue 인스턴스를 사용하여 중앙 집중식으로 이벤트를 관리하는 방법입니다. 그러나 Vue 3에서는 Composition API와 provide/inject 패턴을 사용하는 것이 더 권장됩니다. 6. Vue 3의 Composition API에서의 커스텀 이벤트 Vue 3에서는 Composition API를 사용하여 커스텀 이벤트를 처리할 수 있습니다. `setup` 함수 내에서 `emit`을 사용하여 이벤트를 발생시킬 수 있습니다. ```javascript // ChildComponent.vue <template> <button @click="notifyParent">Click me</button> </template> <script> import { defineComponent, toRefs } from 'vue'; export default defineComponent({ setup(props, { emit }) { const notifyParent = () => { emit('custom-event', 'Hello from Child!'); }; return { notifyParent }; } }); </script> ``` 부모 컴포넌트에서의 사용법은 동일합니다. 결론 Vue.js에서 커스텀 이벤트는 컴포넌트 간의 통신을 간편하게 만들어주는 중요한 기능입니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트에서 이를 수신하여 적절한 처리를 할 수 있습니다. 이러한 방식은 Vue의 단방향 데이터 흐름을 유지하면서도 유연한 컴포넌트 설계를 가능하게 합니다. 커스텀 이벤트를 적절히 활용하면, 복잡한 애플리케이션에서도 컴포넌트 간의 상호작용을 효과적으로 관리할 수 있습니다.
