[Vue3 디렉티브 완전 정복 시리즈]1 디렉티브란 무엇인가요?

디렉티브란? (용어부터 쉽게 설명)

**디렉티브(Directive)**는 Vue 템플릿 안에서 HTML 태그에 특별한 역할을 추가해주는 속성입니다.
Vue는 기본 HTML에 기능을 덧붙이는 프레임워크이고, 디렉티브는 그 도구 중 하나입니다.

Vue에서는 모든 디렉티브가 v-로 시작합니다.
예를 들면 아래와 같습니다:

• v-if: 조건에 따라 보여줄지 말지 결정
• v-show: 보여주긴 하는데 display: none으로 숨김
• v-model: 양방향 입력 연결
• v-on: 이벤트 연결 (예: 클릭)
• v-for: 목록을 반복해서 출력

즉, 디렉티브는 Vue가 HTML을 똑똑하게 만들기 위해 사용하는 문법입니다.

디렉티브는 어디에 사용하나요?

디렉티브는 보통 HTML 태그에 붙여서 아래처럼 사용합니다:

<p v-if="isVisible">이 문장은 조건에 따라 보여져요</p>

 

실전 예제 코드

<template>
  <div>
    <p v-if="visible">이 문장은 지금 보여지고 있어요!</p>
    <button @click="toggle">보이기/숨기기</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 상태 만들기
const visible = ref(true)

// 상태 변경 함수
const toggle = () => {
  visible.value = !visible.value
}
</script>

코드 설명 (쉽게 설명)

• visible: 보여줄지 말지를 저장하는 변수
• v-if="visible": visible이 true면 <p>를 화면에 보여줌
• @click="toggle": 버튼을 누르면 toggle 함수가 실행됨
• toggle() 함수: visible 값을 true <-> false로 바꿈
  
  

단계 요약 (한눈에 정리)

• 디렉티브는 Vue 템플릿에서 HTML 태그에 기능을 부여하는 문법
• v-로 시작하는 형식 (v-if, v-model, v-for 등)
• 조건, 반복, 입력 등 다양한 상황에서 사용
• Vue3 Composition API에서는 ref와 함께 자주 사용됨

 

💬 댓글

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