[Vue] - Vue Event Modifiers

Vue.js의 이벤트 수정자 (Event Modifiers)는 이벤트 핸들러의 동작을 간편하게 수정하는 데 사용되는 특별한 구문입니다. 이를 통해 개발자는 복잡한 로직 없이 간단한 방법으로 이벤트 처리를 조정할 수 있습니다. 이벤트 수정자를 사용하면 이벤트 전파, 기본 동작 방지 등 다양한 기능을 쉽게 구현할 수 있습니다.

주요 이벤트 수정자

1. .stop:
   • 설명: 이벤트의 전파를 중지합니다. 클릭 이벤트가 부모 요소로 전파되는 것을 방지합니다.
   • 예시:

     <button @click.stop="handleClick">Click me</button>
     

2. .prevent:
   • 설명: 기본 동작을 방지합니다. 예를 들어, <form>의 제출로 인한 페이지 새로 고침을 방지합니다.
   • 예시:

     <form @submit.prevent="handleSubmit">
       <button type="submit">Submit</button>
     </form>
     

3. .capture:
   • 설명: 이벤트 캡처링 단계에서 이벤트를 처리합니다. 기본적으로 이벤트는 버블링 단계에서 처리되지만, 이 수정자를 사용하면 캡처링 단계에서 처리할 수 있습니다.
   • 예시:

     <div @click.capture="handleClick">Click me</div>
     

4. .self:
   • 설명: 해당 요소 자신에게만 이벤트가 발생하도록 제한합니다. 자식 요소에서 발생한 이벤트는 부모 요소의 핸들러를 호출하지 않습니다.
   • 예시:

     <div @click.self="handleClick">Click on me, not on children</div>
     

5. .once:
   • 설명: 이벤트 핸들러가 한 번만 호출되도록 합니다. 이후에는 이벤트가 발생해도 핸들러가 호출되지 않습니다.
   • 예시:

     <button @click.once="handleClickOnce">Click me once</button>
     

6. .passive:
   • 설명: 기본 이벤트가 차단되지 않도록 하여 스크롤 성능을 향상시킵니다. 특히 스크롤 이벤트에서 유용합니다.
   • 예시:

     <div @scroll.passive="handleScroll">Scroll me</div>
     

복합 수정자

이벤트 수정자는 함께 사용될 수 있습니다. 예를 들어, .stop과 .prevent를 동시에 사용할 수 있습니다.

<button @click.stop.prevent="handleClick">Click me</button>

요약

• 이벤트 수정자는 Vue.js에서 이벤트 핸들러의 동작을 간편하게 수정할 수 있는 방법을 제공합니다.
• 이를 통해 개발자는 복잡한 로직 없이도 간단하게 이벤트 처리를 조정할 수 있습니다.
• 각 수정자는 특정 상황에서 유용하게 사용되며, 여러 수정자를 조합하여 복잡한 동작을 간단하게 구현할 수 있습니다.
• 이러한 기능은 코드의 가독성을 높이고 유지 관리성을 향상시키는 데 큰 도움이 됩니다.