[Vue3 디렉티브 완전 정복 시리즈]8 외부 라이브러리를 디렉티브로 감싸서 사용하는 방법

외부 라이브러리를 디렉티브로 감싸서 사용하는 방법

Vue 프로젝트를 하다 보면, **타사 외부 라이브러리(예: animation.js, clipboard.js 등)**를 사용해야 할 때가 있습니다.
이럴 때 Vue 디렉티브를 사용하면 라이브러리를 간단하게 통합할 수 있습니다.

실전 예제: ScrollReveal.js로 스크롤 애니메이션 구현하기

 목표

스크롤할 때 요소가 부드럽게 나타나도록 애니메이션을 적용합니다.
이 기능을 디렉티브로 감싸서 원하는 요소에 쉽게 붙일 수 있게 만들겠습니다.

1단계: 라이브러리 설치

npm install scrollreveal

2단계: 디렉티브로 감싸기

src/directives/reveal.js

import ScrollReveal from 'scrollreveal'

export default {
  mounted(el, binding) {
    const options = binding.value || {}
    ScrollReveal().reveal(el, {
      origin: 'bottom',
      distance: '20px',
      duration: 800,
      delay: 100,
      reset: false,
      ...options
    })
  }
}

• binding.value로 사용자 설정도 받을 수 있도록 설계함
• ScrollReveal에서 제공하는 애니메이션 옵션을 확장 가능

3단계: 디렉티브 등록

src/directives/index.js

import reveal from './reveal'

export default {
  install(app) {
    app.directive('reveal', reveal)
  }
}

main.js

import directives from './directives'
app.use(directives)

4단계: 사용 예시

<template>
  <section>
    <h2 v-reveal>스크롤 애니메이션 적용 제목</h2>
    <p v-reveal="{ delay: 300, distance: '50px' }">조금 늦게 나타나는 문단입니다.</p>
  </section>
</template>

v-reveal을 원하는 요소에 붙이기만 하면 ScrollReveal 애니메이션이 적용됩니다.

보너스: 다른 라이브러리에도 응용 가능

• clipboard.js: 텍스트 복사 기능 디렉티브로 감싸기
• tooltip.js: 툴팁 표시
• inputmask.js: 입력 마스크 적용

Vue의 디렉티브는 외부 라이브러리를 Vue의 문법 안에서 자연스럽게 사용할 수 있게 해주는 연결 고리 역할을 합니다.

단계 요약 (한눈에 정리)

• 외부 JS 라이브러리를 디렉티브로 감싸면 Vue 컴포넌트 안에서 쉽게 재사용 가능
• 라이브러리 사용 코드는 mounted 훅 안에서 실행
• 사용자 설정은 binding.value로 전달하면 유연하게 처리 가능
• ScrollReveal.js 외에도 다양한 DOM 라이브러리에 응용 가능

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.