3.4.3 스타일 속성

JSX의 스타일(style) 속성은 일반적인 HTML과 다르게 동작한다. JSX에서는 문자열 대신 자바스크립트 객체를 전달하고, CSS 속성은 카멜 표기법으로 작성한다.

• background-image는 backgroundImage로 작성한다.

• font-size는 fontSize로 작성한다.

• font-family는 fontFamily로 작성한다.

 

자바스크립트 객체를 변수에 저장하거나 중괄호를 이중으로 작성하여({{...}}) 인라인으로 작성할 수도 있다. 이중 중괄호를 잘 살펴보면 바깥쪽의 중괄호는 JSX에서 사용되었고, 안쪽의 중괄호는 자바스크립트의 객체 리터럴을 작성하기 위해 사용되었다.

다음 예제 코드처럼 폰트 크기를 입력한 객체가 있다고 가정해보자.

let smallFontSize = {fontSize: '10pt'}

 

JSX에서는 smallFontSize 객체를 스타일 속성에 넘겨줄 수 있다.

<input style={smallFontSize} />

 

또는 변수를 선언하지 않고 다음과 같이 글자 크기를 30포인트로 지정하여 직접 넘겨줄 수도 있다.

<input style={{fontSize: '30pt'}} />