[Vue3] Template Syntax 단순 정리

Vue를 다시 복습하고 있다. 그런데, 막연한 개념으로 이해하려니까 이해가 안 돼서, Template Syntax를 쉽고 단순하게 정리할 생각이다. 객관적이고 명확하게 Template Syntax를 공부하고 싶다면 공식 문서를 참고하면 좋을 것 같다.

Vue Template Syntax

먼저 Template Syntax에 대해 알아보자. Vue에서 말하는 Template Syntax란 말 그대로 Vue 컴포넌트에서 HTML을 작성할 때 사용하는 특수한 구문이다. Vue의 Template Syntax는 Vue 인스턴스 데이터와 DOM을 선언적으로 바인딩한다.

여기서 선언적이란 말이 뭘까? 프로그래밍 공부를 하다 보면 “선언적(declarative)”이라는 단어와 “명령적(imperative)”이라는 단어를 마주하게 될 때가 있다. 선언적이라는 말은 “결과” 중심이라는 뜻이고, 명령적이라는 말은 “과정” 중심이라는 뜻이다.

다시 말해, 우리는 Vue를 사용하면서 “어떻게(과정)” Vue 인스턴스의 데이터가 템플릿에 반영될지는 신경 꺼도 된다. 하나하나 우리가 명령을 내려가듯 지시할 필요가 없다. 그저 템플릿에 “무엇(결과)“을 바인딩할지 선언하면 된다. “어떻게” 할지는 Vue가 알아서 처리해 준다.

(chat GPT의 예시)

정리해 보자면, Vue에서 Template Syntax란, Vue 인스턴스 데이터를 DOM에 결과만 딱 바인딩(연결)시키는 거다. 과정을 일일이 명령할 필요 없다.

난 이러한 템플릿 구문은 크게 2가지로 나누려고 한다. 하나는 콧수염 구문이고, 다른 하나는 디렉티브다.

콧수염 구문(Mustache Syntax)

콧수염 구문은 중괄호'{{ }}’ 를 사용하여 데이터를 바인딩하는 가장 기본적이고 단순한 방법이다.

<p>{{ message }}</p>

위 코드는 데이터 바인딩의 가장 기본적인 형태로, Vue 인스턴스의 ‘message’ 데이터를 템플릿에 바인딩한다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

또한 단순히 데이터 바인딩을 넘어서 자바스크립트 표현식을 사용할 수도 있다. 여기서 표현식이란, 어떤 하나의 값으로 평가될 수 있는 코드 조각을 말한다. 따라서 하나의 값으로 평가되지 않는 선언문( {{ const a = 10 }} ) 등은 쓸 수 없다.

Directive

디렉티브(directive)는 ‘v-‘ 접두사가 있는 특수한 속성으로, Vue 인스턴스의 데이터를 기반으로 DOM을 복잡하고 정교하게 조작할 수 있게 한다. 콧수염 구문이 단순히 데이터를 DOM과 바인딩하는 역할을 했다면, 디렉티브는 이를 보다 확장하여, 훨씬 복잡한 DOM 조작을 가능하게 한다.

directive는 속성이므로 HTML 태그 속에 작성한다.

(Vue 공식 문서)

디렉티브의 구조는 위와 같다. 디렉티브의 이름 뒤에 ‘:'(콜론)이 들어가고, 콜론 뒤에 인자가 들어간다. ‘.'(점) 뒤에는 수식어가 들어갈 수 있다. 수식어는 디렉티브가 특별한 방식으로 바인딩 되도록 한다.

‘=’ 뒤에는 속성 값이 나오는데, 속성 값은 단일 자바스크립트 표현식이다.