> 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/attribute-interpolation.md).
# 속성 인터폴레이션
속성 보간법
동적으로 요소의 속성에 데이터를 인터폴레이션 할 경우, 큰 따옴표(`""`) 대신 중괄호(`{}`)로 묶어 처리합니다.
```jsx
{headline}
```
## **스타일 속성 (인라인)**
스타일 코드는 JavaScript 객체(`{}`) 표기를 사용해야 합니다.
```jsx
```
{% hint style="info" %}
#### 다른 속성과 달리 style 속성은 왜 객체인 것일까요?
JSX는 Babel 컴파일러에 의해 React 요소로 변환됩니다. React 요소는 가상 DOM 요소를 추상화 한 객체로 다음과 같이 컴파일 되어야 합니다. 그러므로 style 속성은 객체를 사용해야 합니다.
{% code title="JSX → React 요소(가상 DOM 노드)" %}
```jsx
{
type: 'figure',
props: {
style: {
marginTop: '1rem',
marginBottom: '0.8rem'
}
}
}
```
{% endcode %}
{% endhint %}
## **스타일 속성 (객체)**
스타일 코드를 설정한 객체를 변수에 분리하여 처리할 수도 있습니다.
```jsx
const figureStyles = {
marginTop: '1rem',
marginBottom: '0.8rem'
}
```
## **클래스 속성**
`class` 키워드는 [JavaScript 예약 키워드](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar#ecmascript_2015_%EA%B8%B0%EC%A4%80_%EC%98%88%EC%95%BD_%ED%82%A4%EC%9B%8C%EB%93%9C)로 사용할 수 없으므로, 대신 `className`을 사용해야 합니다.
```jsx
```
## **클래스 속성 (동적 처리)**
동적으로 CSS 클래스 이름을 변경해야 할 경우, 아래와 같이 `{}`를 사용해 처리합니다.
```jsx
let badgeType = 'success' // 'success', 'warning', 'error', 'info'
```
{% hint style="warning" %}
#### Vue의 속성 바인딩
Vue와 Angular는 템플릿 엔진을 사용하고, 디렉티브(Directives)를 사용해 [속성 바인딩](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) 합니다.
{% code title="Vue의 데이터 바인딩(Data Binding)" %}
```markup
Vue는 v-bind 디렉티브를 사용해 속성에 데이터를 요소에 바인딩 합니다.
```
{% endcode %}
{% endhint %}