Vue Directives

Vue.js 컴포넌트 내에서 템플릿 문법을 확장하여 DOM을 조작하고 데이터를 바인딩하는 핵심 방법이 지시어(directive)다. Vue Template Syntax의 하위 개념이며 v-bind, v-model, v-if, v-show, v-for, v-on 같은 개별 지시어를 포함한다. 이 페이지가 답하는 질문은 "Vue에서 데이터를 DOM 엘리먼트에 어떻게 바인딩하고, 이벤트를 어떻게 처리하는가"다.

핵심 모델

뷰(View)와 모델(Model)의 분리

Vue 지시어는 뷰와 모델 사이의 선언적 연결 고리를 제공하여, 개발자가 DOM을 직접 조작(Imperative)하는 대신 데이터 상태(State) 관리에만 집중하도록 돕는다고 볼 수 있다. 특히 v-model은 양방향 바인딩을 기본 제공하여, 복잡한 폼(Form) 처리 코드를 획기적으로 줄여준다는 점에서 폼 처리의 보일러플레이트를 없애는 역할이 크다.

이 지시어들은 반응성 시스템이 상태 변화를 감지해야 동작하며, Vue의 선언적 렌더링 방식을 설명한다. document.getElementById 같은 Vanilla JS DOM API나 JavaScript 내부에서 UI를 반환하는 React JSX 방식과 대비되고, Vue component 템플릿 내부에서 쓰인다.

경계

메커니즘

주요 템플릿 구문 및 지시어 요약

지시어는 각각 DOM 엘리먼트에 특정 반응형 동작을 부여하는 고유한 메커니즘을 가진다.

절충점

v-if vs v-show

두 지시어는 렌더링 비용과 토글 비용 사이에서 트레이드오프(Trade-off)를 가진다.

지시어 렌더링 방식 초기 렌더링 비용 조건 전환(토글) 비용 권장 사용처
v-if 조건 참일 때만 DOM을 생성/파괴 낮음 (거짓이면 안 그림) 높음 (매번 컴포넌트 재생성) 런타임에 조건이 거의 변하지 않을 때
v-show 항상 렌더링 후 CSS display 토글 높음 (무조건 그림) 낮음 (단순 CSS 변경) UI 토글이 매우 빈번하게 발생할 때

v-model (양방향 바인딩)

안티 패턴: v-if와 v-for를 함께 쓸 때, 불안정한 key

안티 패턴 (Anti-patterns)

예시

<template>
  <div>
    <!-- v-bind -->
    <a :href="url">링크 바인딩</a>

    <!-- v-model -->
    <input v-model="message" placeholder="메시지 입력">
    <p>{{ message }}</p>

    <!-- v-if vs v-show -->
    <p v-if="isVisible">렌더링 조건 토글</p>
    <p v-show="isVisible">가시성 토글</p>

    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- v-on -->
    <button @click="handleClick">클릭</button>
  </div>
</template>

관련

출처

테스트 질문

  1. 01-2.Vuejs-directive.pdf — template interpolation, v-bind, class/style binding, v-model, conditional/list rendering, v-if vs v-show 구분 ↩︎ ↩︎

  2. 02.Vuejs-instance.pdf — v-on/@ event binding과 .stop/.prevent/.self/.once modifier 설명 ↩︎