> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/learning-history/jsx-in-action/contents-interpolation.md).
# 콘텐츠 인터폴레이션
콘텐츠 보간법
JSX 코드의 `{}`는 JavaScript 표현식의 연산된 결과 값을 처리하여 콘텐츠를 인터폴레이션 합니다.
## **문자 값 (**[**template literal** ](/learning-react-app/tip-and-references/js-frequently-used-in-react/template-liternals.md)**활용)**
문자 값 연산 결과는 값을 반환하므로 사용 가능합니다.
```jsx
{`${headline}(${abbrs.jsx})`}
```
## **숫자 값**
숫자 연산 결과는 값을 반환하므로 사용 가능합니다.
```jsx
{number % 4}
```
## **함수 (또는 메서드) 결과 값**
함수는 결과 값을 반환하므로 사용 가능합니다.
```jsx
{formatCount()}
```
{% hint style="warning" %}
#### Vue의 콘텐츠 바인딩
Vue 그리고 Angular는 템플릿 엔진을 사용하며 더블 컬리브레이스( [**{{ }}**](https://v3.ko.vuejs.org/guide/introduction.html#%E1%84%89%E1%85%A5%E1%86%AB%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%8C%E1%85%A5%E1%86%A8-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC-declarative-rendering) )를 사용해 데이터를 바인딩합니다. 반면 React는 JSX를 사용하며 싱글 컬리브레이스 ( **{ }** )를 사용해 인터폴레이션합니다.
{% code title="Vue의 템플릿 코드" %}
```markup
카운터: {{ counter }}
```
{% endcode %}
{% endhint %}