속성 인터폴레이션

속성 보간법

동적으로 요소의 속성에 데이터를 인터폴레이션 할 경우, 큰 따옴표("") 대신 중괄호({})로 묶어 처리합니다.

<abbr title={abbrs.jsx}>{headline}</abbr>

스타일 속성 (인라인)

스타일 코드는 JavaScript 객체({}) 표기를 사용해야 합니다.

<figure style={{ marginTop: '1rem', marginBottom: '0.8rem' }} />

다른 속성과 달리 style 속성은 왜 객체인 것일까요?

JSX는 Babel 컴파일러에 의해 React 요소로 변환됩니다. React 요소는 가상 DOM 요소를 추상화 한 객체로 다음과 같이 컴파일 되어야 합니다. 그러므로 style 속성은 객체를 사용해야 합니다.

JSX → React 요소(가상 DOM 노드)

{
  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)를 사용해 속성 바인딩 합니다.

Vue의 데이터 바인딩(Data Binding)

<span v-bind:title="message">
  Vue는 v-bind 디렉티브를 사용해 속성에 데이터를 요소에 바인딩 합니다.
</span>