[Vue 3] 템플릿 문법과 컴포넌트 데이터

Vue는 컴포넌트 단위로 구성됩니다. 컴포넌트가 무엇인지 알아야 DOM을 원하는데로 그려낼 수 있습니다. 이번 글에서는 컴포넌트의 데이터를 가지고 HTML에 렌더링하는 방법에 대해 알아보겠습니다.

콧수염 문법(Mushtache Syntax)

컴포넌트의 데이터를 DOM에 그리는 방법으로 사용되는 문법은 중괄호({{}})입니다.

      <p>메시지: {{ msg }}</p>
    

{ 가 콧수염처럼 생겼다고 해서 Mustache syntax(콧수염 문법)이라고 부릅니다. 컴포넌트에 msg란 데이터가 있고 안녕하세요란 값이 들어있다면 실제로 HTML은 다음과 같이 그려집니다.

      <p>메시지: 안녕하세요</p>
    

만약 msg 값이 잘가세요라면 다음과 같이 바뀌게 됩니다.

      <p>메시지: 잘가세요</p>
    

Javascript 표현식

괄호 안에는 단순한 값 뿐만 아니라 Javascript의 표현식이 들어갈 수 있습니다.

      {{ number + 1 }}

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

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

여기서 표현식은 하나의 값으로 나타낼 수 있는 것을 말합니다. 쉽게 말해 함수에서 return 에 붙여 쓸 수 있으면 됩니다.

예를 들어 다음과 같은 것들은 안됩니다.

      // BAD! 이것은 선언이지 표현식이 아닙니다.
{{ var a = 1 }}

// BAD! 제어문도 쓰면 안됩니다. 차라리 위에서처럼 3항 연산자를 사용하세요
{{ if (ok) { return message } }}

// GOOD! 3항 연산자
{{ ok ? message : "" }}
    

window 값도 쓸 수 있나요?

단순한 숫자, 문자열 값부터 Math와 Date까지 특정 용도의 값들을 사용할 수 있지만, 아쉽게도 window는 사용할 수 없습니다. 여기를 보시면 다음과 같이 사용할 수 있는 값들을 정해놨거든요.

      const GLOBALS_WHITE_LISTED =
  'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
  'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'
    

하지만 명시적으로 추가하는 방법이 있습니다. 바로 Vue 앱 설정에 추가하는 것이죠!

      app.config.globalProperties.window = window
    

그러면 window 값을 쓸 수 있습니다!

      <p>{{ window.innerWidth }}</p>
    

컴포넌트 데이터를 HTML에 그리는 방법은 알겠는데, 그러면 데이터는 어떻게 만들까요?

컴포넌트의 데이터(data)

컴포넌트에 대한 데이터나 기능같은 것들은 script 태그 안에서 만들어집니다.

      <script>
export default {
	// 데이터
	// 기능
}
</script>
    

그리고 데이터는 data 라는 메소드를 통해 선언할 수 있습니다. 위의 예시에서 나왔던 msg를 만드려면 다음과 같이 하면 됩니다.

      <script>
export default {
	data() {
		return {
			msg: "안녕하세요"
		}
	}
}
</script>
    

data 함수에서 { msg: "안녕하세요"} 라는 값을 반환함으로써 컴포넌트는 msg 라는 데이터를 갖게 되었습니다. 이를 template 태그 안에서 사용할 수 있습니다.

      <template>
	<p>메시지: {{ msg }}</p>
</template>

<script>
export default {
	data() {
		return {
			msg: "안녕하세요"
		}
	}
}
</script>
    

이것이 컴포넌트 데이터로 DOM을 동적으로 그릴 수 있는 기본적인 방법입니다!

undefined와 null

만약 해당 데이터가 undefined나 null의 값을 가지면 이를 무시하게 됩니다.

      <!-- <p></p> 가 됩니다. --> 
<p>{{ undefined }}{{ null }}</p>
    

하지만 NaN이나 false, Infinity와 같은 값들은 그대로 출력됩니다.

      <!-- <p>NaN</p> -->
<p>{{ NaN }}</p>

<!-- <p>false</p> -->
<p>{{ false }}</p>

<!-- <p>Infinity</p> -->
<p>{{ Infinity }}</p>
    

HTML 코드

콧수염 문법은 undefined와 null 값이 아니라면 문자열로 취급해서 렌더링합니다. Javascript의 innerText처럼요. 그래서 만약 HTML 코드를 넣어서 사용한다면 생각과 다르게 결과가 나옵니다.

      <p>{{ `<span style="color: red">Hello</span>` }}</p>
    

원래라면 빨간색 글자로 Hello 가 나오길 기대했지만 문자열 전체가 다 나와버렸습니다.

      설마 문자열이라 안된다고 생각해서 `를 빼실 생각을 하시는 건 아니시겠죠? 기억하세요 콧수염 문법은 Javascript 표현식만 된다는 것을요!
    

마무리하며

네 이번 글에서는 콧수염 문법과 컴포넌트의 data 속성에 대해 알아봤습니다. 사실 컴포넌트에 안에 들어가는 속성들은 많이 있습니다. 다음 글에서는 대표적으로 자주 같이 사용되는 computed, watch, methods에 대해 알아보겠습니다.