[Vue.js] 템플릿 문법 - 데이터 바인딩, 디렉티브

Bam·2023년 9월 22일

Vue.js

목록 보기

7/9

Vue는 컴포넌트 인스턴스 데이터들을 DOM에서 바인딩 할 수 있는 HTML 기반의 템플릿 문법을 사용하고 있습니다. 여기서 템플릿은 뷰 컴포넌트를 정의하면서 작성한 HTML, CSS, 로직을 브라우저에서 볼 수 있는 HTML의 형태로 변환하는 것을 의미합니다.

다시말해 템플릿 문법이라고 한다면 브라우저 화면을 조작하는 방법이라고 할 수 있습니다. Vue에서는 템플릿 문법으로 데이터 바인딩과 디렉티브를 채택하고 있습니다.

데이터 바인딩은 컴포넌트 인스턴스에서 정의한 속성들을 화면에 표시하기 위한 방법입니다.

텍스트 보간법은 가장 기본적으로 사용되는 데이터 바인딩방식입니다. 이중 중괄호(mustache, 콧수염 괄호) 방식을 사용합니다.

<span>Hello, {{ name }}!</span>

이때 사용된 name은 해당 컴포넌트의 인스턴스 name 속성으로 전달된 값으로 대체되어 표시됩니다.

Vue에서 v-접두사를 붙여서 표현하는 특수한 속성들을 디렉티브(directives)라고 부릅니다. 화면 조작을 더 편하게 하기 위해 제공해주는 문법이라고 할 수 있습니다.

기본적으로 제공되는 몇 가지 디렉티브들이 있는데 이들을 빌트인 디렉티브라고 부릅니다. 빌트인 디렉티브는 다음과 같은 것들이 있습니다.

디렉티브	설명
v-text	텍스트 콘텐츠를 업데이트합니다. 이중 중괄호로 사용이 가능합니다.
v-html	innerHTML으로 요소를 업데이트합니다. 템플릿 문법대신 HTML로 삽입됩니다.
v-show	표현식의 truthy한 값을 기반으로 요소를 표시할 지 결정합니다. (조건부 렌더링에 이용)
v-if	표현식의 truthy한 값을 기반으로 템플릿의 일부를 조건부 렌더링 합니다.
v-else	`v-if`, `v-else-if`와 사용되는 체인입니다.
v-else-if	`v-if`에 대한 else if 블록입니다.
v-for	데이터를 기반으로 요소나 블록을 여러 번 렌더링합니다.
v-on	요소에 이벤트 리스너를 연결합니다.
v-bind	하나 이상의 속성이나 props를 표현식에 동적 바인딩합니다.
v-model	form 요소나 컴포넌트에 양방향 바인딩을 만듭니다.
v-slot	이름이 있는 slot이나 props를 받을 것으로 예상되는 scoped 슬롯을 표시합니다.
v-pre	사용된 요소와 모든 자식 요소의 컴파일을 생략합니다.
v-once	요소와 컴포넌트를 한 번만 렌더링하고 이후 업데이트는 하지 않습니다.
v-memo	템플릿의 하위 트리를 메모합니다.
v-cloak	준비가 될 때까지 컴파일되지않은 템플릿을 숨깁니다.

v-memo에서 메모는 메모제이션이라는 연산을 의미합니다. 메모제이션은 연산을 반복하는 경우 이전 수행 값들을 따로 저장(메모)하여 반복 수행 횟수를 최적화하는 기술입니다.

디렉티브는 일반적으로 다음 형태로 사용됩니다. 이미지 출처

지금은 디렉티브의 종류에 대해서 간단히 설명만 했는데 다음 포스트에서 좀 더 자세하게 그 기능과 사용법을 알아보려고 합니다.