속성 인터폴레이션
속성 보간법
동적으로 요소의 속성에 데이터를 인터폴레이션 할 경우, 큰 따옴표(""
) 대신 중괄호({}
)로 묶어 처리합니다.
<abbr title={abbrs.jsx}>{headline}</abbr>
스타일 속성 (인라인)
스타일 코드는 JavaScript 객체({}
) 표기를 사용해야 합니다.
<figure style={{ marginTop: '1rem', marginBottom: '0.8rem' }} />
다른 속성과 달리 style 속성은 왜 객체인 것일까요?
JSX는 Babel 컴파일러에 의해 React 요소로 변환됩니다. React 요소는 가상 DOM 요소를 추상화 한 객체로 다음과 같이 컴파일 되어야 합니다. 그러므로 style 속성은 객체를 사용해야 합니다.
{
type: 'figure',
props: {
style: {
marginTop: '1rem',
marginBottom: '0.8rem'
}
}
}
스타일 속성 (객체)
스타일 코드를 설정한 객체를 변수에 분리하여 처리할 수도 있습니다.
const figureStyles = {
marginTop: '1rem',
marginBottom: '0.8rem'
}
<figure style={figureStyles} />
클래스 속성
class
키워드는 JavaScript 예약 키워드로 사용할 수 없으므로, 대신 className
을 사용해야 합니다.
<span className="badge badge-primary m-2" />
클래스 속성 (동적 처리)
동적으로 CSS 클래스 이름을 변경해야 할 경우, 아래와 같이 {}
를 사용해 처리합니다.
let badgeType = 'success' // 'success', 'warning', 'error', 'info'
<span className={`badge badge-${badgeType}`} />
Vue의 속성 바인딩
Vue와 Angular는 템플릿 엔진을 사용하고, 디렉티브(Directives)를 사용해 속성 바인딩 합니다.
<span v-bind:title="message">
Vue는 v-bind 디렉티브를 사용해 속성에 데이터를 요소에 바인딩 합니다.
</span>
Last updated
Was this helpful?