[Vue] Directive(디렉티브) 정리

이번 글에서는 자주 사용되는 Vue 디렉티브를 정리해 보려고 한다.

v-bind

v-bind는 ‘HTML 속성’과 JS 표현식을 동적으로 바인딩한다. 일반적인 HTML 속성과 바인딩할 수도 있고, 클래스나 스타일 속성을 바인딩할 수도 있다.

일반 속성 바인딩

HTML 속성 값을 Vue 앱 인스턴스의 데이터와 바인딩한다. 다음은 예시 코드이다.

src라는 속성을 인자로 v-bind를 작성했다. 속성 값으로는 imgURL이라는 Vue 앱 인스턴스의 변수가 들어간다.

축약형

v-bind는 사용되는 빈도가 높으므로 축약형이 존재한다. v-bind의 축약형은 콜론`:`만 사용하고 앞에 ‘v-bind’라는 글자를 생략하는 것이다.

동적 속성 이름

동적 속성 이름(Dynamic Attribute Name)이라는 기능도 있다. 동적 속성 이름은 속성의 값이 아니라, 속성 이름 자체를 동적으로 설정할 수 있는 기능이다.

다만 이때 대괄호 ‘[ ]’ 안에 들어가는 속성 이름은 ‘소문자’로만 작성해야 인식이 된다.

클래스 및 스타일 바인딩

‘class’나 ‘style’도 모두 HTML의 속성이기 때문에 ‘v-bind’를 사용해서 동적으로 Vue 앱 인스턴스의 문자열 데이터를 할당할 수 있다. 이때 ‘객체’나 ‘배열’을 사용한다.

객체 구문

먼저 클래스 바인딩일 때를 보자. 객체 구문에서는 클래스의 이름을 키(key)로, 해당 클래스가 적용되는 조건을 값(value)로 설정한다.

위 예시에서 ‘active’라는 클래스는 ‘isActive’가 true이므로 적용된다.

한편, CSS 스타일 바인딩에서는 객체 구문에서 CSS 속성 이름과 해당 속성의 값이 키(key)와 값(value)로 설정된다.

배열 구문

클래스 바인딩에서는 배열에 클래스 이름을 넣어 바인딩한다.

한편, 스타일 바인딩에서는 여러 가지 style 객체를 배열에 넣어 작선한다.

v-on

‘v-on’은 DOM 요소에 이벤트 리스너를 연결하여 이벤트가 발생했을 때 이를 처리하는 디렉티브다. 이벤트가 발생할 때 실행할 메서드나 인라인 JS 표현식을 작성하여 사용한다.

( 클릭 전 )

( 클릭 후 )

축약형

v-on의 축약형은 @이다.

Method handlers

v-on에서 사용되는 이벤트 핸들러 메서드는 자동으로 첫번째 인자로 DOM event 객체를 전달받는다.

사용자 지정 인자를 넣을 수도 있다. event와 사용자 지정 인자를 동시에 넣을 수도 있고 말이다.

Event Modifiers

이벤트 수식어(Event Modifiers)를 사용해서 이벤트 리스너의 동작을 세부적으로 조정할 수 있다. ‘stop’ 수식어는 이벤트의 전파를 막으며, ‘prevent’ 수식어는 이벤트의 기본 동작을 막는다.(예를 들어 폼 태그의 페이지 리로드 같은 거.) 점(‘.’)을 통해 여러 개의 이벤트 수식어를 동시에 사용할 수 있다.

v-model

‘v-model’은 사용자 입력값과 Vue 인스턴스 데이터를 양방향으로 데이터 바인딩하는 디렉티브다. 사용자가 입력한 값이 자동으로 Vue 데이터에 반영되고, Vue 데이터가 변경되면 입력값도 자동으로 업데이트된다.

물론 v-model은 v-bind와 v-on을 통해 똑같이 구현할 수 있다.

v-if

‘v-if’는 표현식의 값이 true인지 false인지에 따라 조건부로 렌더링하는 디렉티브다. ‘v-else’나 ‘v-else-if’를 사용하여 다양한 조건을 표현할 수도 있다.

template 태그

‘template’ 태그는 페이지가 로드될 때 렌더링 되지 않지만, JS 로직을 적용할 수 있는 HTML 태그이다. ‘template’ 태그에 v-if 를 사용하면, template 태그 내부 컨텐츠가 조건에 따라 화면에 렌더링된다.

v-show

‘v-show’는 표현식의 값이 true일 때, 해당 요소를 화면에 보이게 한다. v-if와 달리 요소가 항상 DOM에 존재하지만, CSS display 속성만 전환해서 화면에 보이게 할지 말지 결정한다.

‘v-if’는 초기 렌더링 비용이 낮지만 전환 비용이 높고, ‘v-show’는 처음에 모든 것을 렌더링하기 때문에 초기 렌더링 비용이 높지만 이미 렌더링 되어 있으므로 전환 비용이 낮다. 따라서 컨텐츠가 자주 전환된다면 v-if보다는 v-show를 사용하는 게 낫다.

참고로 ‘v-show’는 template 요소에서 제대로 동작하지 않으므로 주의해야 한다. template 요소 자체는 렌더링 되지 않기 때문에 display로 속성을 전환할 수 없기 때문이다.

v-for

‘v-for’는 배열이나 객체를 반복하여 렌더링하기 위해 사용하는 디렉티브다. v-for의 구조는 아래와 같다.

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

‘items’는 배열이나 객체를 가리키고, ‘item’은 반복 중인 현재 요소를 나타낸다. ‘:key’는 내장된 특수 속성으로 Vue가 반복되는 요소를 식별하기 위해 사용된다. key는 반드시 사용해야 하고, 고유한 숫자나 문자열만 가능하다. 인덱스는 고유하지 않기 때문에 사용하지 않는 게 좋다.

한편 v-for와 v-if는 동일 요소에 사용할 수 없다. v-if의 우선순위가 높으므로 v-for가 무시되고 오류가 발생할 수 있기 때문이다. 이때 사용할 수 있는 해결책은 template 태그를 사용하는 것이다.