[Vue] Template Syntax의 Text Interpolation

Vue에서 data를 html template에 바인딩하기 위한 방법으로 Text Interpolation 문법이 있습니다.

문법은 "Mustache"의 문법을 사용하였고 아래와 같습니다. msg라는 식별자의 값이 변경이 될 때마다 업데이트됩니다.

{{}} -> Mustache 문법

mustache tag는 vue의 데이터인 msg의 값으로 대체되는데요.

msg라는 식별자의 값이 "Hello!"였다면 다음과 같이 변환이 됩니다.

React와 비교해 보면 JSX에서 JavaScript의 표현식을 사용하기 위한 {} (curly braces syntax)와 동일하다고 볼 수 있을 것 같습니다.

그런데 표현되는 형식이 React의 {} 와는 차이가 있는데요. 바로 참조형 타입에 한해서입니다.

 

React의 경우에는 만약에 msg라는 식별자의 값이 객체였다면 'Objects are not valid as a React Child'라는 에러가 발생하고 배열의 경우에는 배열의 값이 [1, 2, 3]이었다면 123과 같이 화면에 렌더링 됩니다.

 

하지만 Vue의 경우에는 다른 결과를 보여주는데요. 

객체의 경우에는 아래와 같이 객체를 그대로 보여주게 되고, 

배열의 경우에도 아래와 같이 보여주게 됩니다.

그 이유는 Vue에서 Text Interpolation을 자바스크립트의 식별자로 변환할 때 쓰이는 함수에서 찾아볼 수 있습니다.

https://github.com/vuejs/vue/blob/dev/src/shared/util.js#L81

GitHub - vuejs/vue: This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

toString이라는 함수는 val이라는 any 타입의 값을 받아서 string 타입을 리턴해주고 있는데요.

만약에 null 또는 undefined라면 빈 문자열을 리턴해주고

배열이거나 객체이면서 그 객체가 참조하는 toString()이라는 메서드가 프로토타입 체인상의 Object.prototype.toString을 참조한다면 JSON.stringify() 메서드를 사용하기 때문에 참조형 타입임에도 불구하고 화면에 객체와 배열이 그대로 보이게 됩니다.

그 외에, 기본형인데 null과 undefined가 아닌 것은 String()을 사용하여 문자열로 변환해 줍니다.

 

기존 코드에서는 nested tenary operator(중첩 삼항 연산자)가 적용이 되어 있는데 저였다면 아래와 같이 toString 함수를 작성했을 것 같습니다.

일반적으로는 자바스크립트에서 참조형을 문자열로 표현하기 위해 Object.prototype.toString 메서드를 활용하는게 일반적이지만 Vue에서는 참조형 타입을 문자열로 표현할 때 JSON.stringify() 메소드를 활용하고 있다는 것을 알 수 있었습니다.