# 속성 인터폴레이션
동적으로 요소의 속성에 데이터를 인터폴레이션 할 경우, 큰 따옴표(`""`) 대신 중괄호(`{}`)로 묶어 처리합니다.
```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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://yamoo9.gitbook.io/learning-react-app/learning-history/jsx-in-action/attribute-interpolation.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.