콘텐츠 인터폴레이션

콘텐츠 보간법

JSX 코드의 {}는 JavaScript 표현식의 연산된 결과 값을 처리하여 콘텐츠를 인터폴레이션 합니다.

문자 값 (template literal 활용)

문자 값 연산 결과는 값을 반환하므로 사용 가능합니다.

<h1>{`${headline}(${abbrs.jsx})`}</h1>

숫자 값

숫자 연산 결과는 값을 반환하므로 사용 가능합니다.

<span>{number % 4}</span>

함수 (또는 메서드) 결과 값

함수는 결과 값을 반환하므로 사용 가능합니다.

<p>{formatCount()}</p>

Vue의 콘텐츠 바인딩

Vue 그리고 Angular는 템플릿 엔진을 사용하며 더블 컬리브레이스( {{ }} )를 사용해 데이터를 바인딩합니다. 반면 React는 JSX를 사용하며 싱글 컬리브레이스 ( { } )를 사용해 인터폴레이션합니다.

Vue의 템플릿 코드

<template>
  <div id="counter">
    카운터: {{ counter }}
  </div>
</template>