컴포넌트의 template 속성을 이용하면, 단순한 HTML 태그 뿐만 아니라 데이터 바인딩, 조건부 렌더링, 리스트 렌더링 등 템플릿 문법을 통해 HTML을 좀 더 동적으로 구성할 수 있습니다. 이번 글에서는 템플릿 문법 중 하나인 콧수염 문법에 대해 알아보겠습니다.
콧수염 문법 (Mustache Syntax)
HTML 태그의 구조는 다음과 같이 구성되어 있습니다.
콧수염 문법은 컴포넌트의 데이터와 내용을 연결해줍니다. 예를 들어, msg라는 변수를 가진 컴포넌트 데이터가 있다고 가정해 봅시다. 그러면 중괄호({, }) 두 개로 감싸서 사용할 수 있습니다.
export default {
template: "<p>{{ msg }}</p>",
};
만약 msg 값이 "Hello"라면 <p>Hello</p>가 됩니다. 그렇다면, 이 msg 값은 어디서 가져오는 것일까요?
setup 함수
컴포넌트의 데이터는 컴포넌트 객체가 가지고 있는 변수나 함수 등을 의미합니다. 이 데이터는 객체의 setup 속성에 함수를 추가하여 만들 수 있습니다. 그리고 template 속성에서 사용할 값들은 반환해주면 됩니다.
export default {
template: "<p>{{ msg }}</p>",
// setup: function() { 와 동일
setup() {
const msg = "Hello";
return {
msg, // msg: msg 와 동일
};
},
};
Live Server를 켜서 보시면 다음과 같이 나옵니다.
“Hello”로 바뀌었습니다!
그런데 말입니다. 이렇게 할거라면 그냥 <p>{{ msg }}</p> 대신 <p>Hello</p> 쓰는게 나아보입니다
단순히 문자열만 넣는다면 그렇겠죠! 하지만 단순히 변수를 넣는 것 뿐만 아니라 다른 좋은 기능들이 있습니다!
Javascript 표현식
중괄호({{ }}) 안에서는 JavaScript 표현식을 사용할 수 있습니다. 표현식이란 어떤 값으로도 평가될 수 있는 코드를 말합니다. 간단히 말해, 함수의 return 뒤에 넣을 수 있다면 그것은 표현식입니다.
// ✅ : 다양한 표현식을 쓸 수 있습니다.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
// ❌ : 표현식이 아니라면 동작하지 않습니다.
{{ var a = 1 }}
{{ if (ok) { return message } }}
콧수염 문법의 영역
콧수염 문법은 단순히 그 영역에 컴포넌트 데이터 값을 넣겠다는 의미이므로 그 옆에 다른 태그나 내용이 들어갈 수 있습니다.
export default {
template: "<p>{{ msg }} <span>My name is ...</span></p>",
// ...
};
그럼 Hello 대신 <span>Hello</span> 어떻게 될까요?
export default {
template: "<p>{{ msg }}</p>",
setup() {
const msg = "<span>Hello</span>";
return {
msg,
};
},
};
Vue는 msg를 단순히 문자열 데이터로만 인식하기 때문에 별도로 HTML 코드를 해석하지 않습니다.
객체, 배열, 그리고 함수
JavaScript에는 문자열, 숫자와 같은 단순한 타입 뿐만 아니라 객체, 배열, 함수 등 복잡한 타입의 값들도 있습니다. 콧수염 문법에는 JavaScript 문법이 적용되기 때문에 이 타입의 값들도 사용할 수 있습니다.
export default {
template: `
<p>{{ func }}</p>
<p>{{ func() }}</p>
<p>{{ obj }}</p>
<p>{{ obj.name }}</p>
<p>{{ array }}</p>
<p>{{ array[0] }}</p>
`,
setup() {
return {
func: () => "함수의 반환값",
obj: { name: "Vuelogger" },
array: [1, 2, 3, 4, 5],
};
},
};
블로그 프로젝트 - 메뉴 바 만들기
이제 콧수염 문법을 익혔으니 이제 메뉴바를 만들어보겠습니다. 메뉴의 카테고리 이름들이 들어간 categories 라는 변수를 만들겠습니다.
// ...
setup() {
const categories = ["HTML", "CSS", "Javascript"];
return {
categories
};
},
// ...
그리고 template 에서는 이 배열 값을 하나씩 꺼내어 a 태그에 넣어줄겁니다.
// ...
template: `
<nav class="menu">
<a href="" class="category">{{ categories[0] }}</a>
<a href="" class="category">{{ categories[1] }}</a>
<a href="" class="category">{{ categories[2] }}</a>
</nav>
`,
// ...
아직 이동할 페이지를 만들지 않았기 때문에 간단하게 href에는 빈 값을 넣어주겠습니다.
메뉴바가 완성되었습니다! 근데 a 태그 기본 스타일이 들어가서 약간 답답하고 허전한 느낌이 듭니다. 다음 글에서는 스타일을 간단하게 입혀보고 넣지 못한 href 속성 값을 채워서 넣어볼게요!
