[Vue3 디렉티브 완전 정복 시리즈]7 디렉티브 vs 컴포넌트, 언제 무엇을 써야 할까?

디렉티브 vs 컴포넌트, 언제 무엇을 써야 할까?

Vue를 배우다 보면 이런 질문이 생깁니다:
"이 기능, 디렉티브로 만들까? 컴포넌트로 만들까?"

이번 시간에는 이 두 가지의 차이를 정확히 이해하고, 언제 디렉티브를 쓰고 언제 컴포넌트를 써야 하는지 정리해드립니다.

개념 비교: 디렉티브 vs 컴포넌트

항목 디렉티브 컴포넌트

목적	DOM 조작 중심의 기능 재사용	UI 구조 + 로직 재사용
형태	v-my-directive처럼 속성처럼 사용	<MyComponent />처럼 태그 형태
기능 범위	간단한 동작 1~2개	템플릿 + 스타일 + 로직 전체 포함
예시	포커스, 복사, 스크롤 등	카드 UI, 모달 창, 폼 등

디렉티브가 적합한 상황

• HTML 요소에 작은 동작만 추가하고 싶을 때
• 복잡한 UI 없이 DOM 조작만 필요할 때
• 이벤트 등록, 포커스 제어, 스타일 변경 등에 유용

예시

<input v-focus />
<button v-copy="'링크 주소'" />

컴포넌트가 적합한 상황

• 템플릿(화면 구조), 스타일, 자바스크립트 로직이 함께 있는 경우
• 다양한 상태와 props를 주고받아야 하는 경우
• 재사용 가능한 UI 블록을 만들고 싶을 때

예시

<MyModal :title="'알림'" :visible="true" />
<MyCard :user="userInfo" />

실제 예로 판단해 보기

기능 예시 디렉티브? 컴포넌트? 이유

자동 포커스	✅	❌	DOM 조작만 필요
복사 버튼 기능	✅	❌	단일 동작
모달 창 전체	❌	✅	구조 + 상태 필요
스크롤 시 애니메이션	✅	❌	DOM 기반 제어
사용자 카드 UI	❌	✅	템플릿 포함 구성

단계 요약 (한눈에 정리)

• 디렉티브: 간단한 DOM 동작 중심. 작고 빠르게 처리.
• 컴포넌트: 구조 + 스타일 + 로직이 함께 필요한 경우.
• 선택 기준은 기능의 범위와 UI 구조 포함 여부
• 컴포넌트가 기본이고, 디렉티브는 특수한 상황에서 보조 역할

 

💬 댓글

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