2.2.5 인라인 스타일은 객체로 지정하기

HTML에서는 태그에 직접 style 속성을 지정해 스타일을 적용할 수 있습니다. 이렇게 태그 안에 직접 스타일을 작성하는 방식을 인라인 스타일이라고 합니다. 예를 들어, 다음과 같이 style 속성에 문자열을 할당해 <h1> 태그의 텍스트 색상을 red, 배경 색상을 lightgray로 설정합니다.

<h1 style="color: red; background-color: lightgray">Styled Text</h1>

JSX에서는 style 속성에 문자열이 아닌 자바스크립트 객체를 할당합니다. 그리고 CSS 속성명은 반드시 카멜 케이스로 작성해야 합니다. 앞의 예제를 JSX로 바꾸면 다음과 같습니다. 속성 이름에 하이픈(-)이 있다면 모두 카멜 케이스로 바꿔야 합니다. 따라서 background-color는 backgroundColor로 표기합니다.

<h1
  style={{
    color: "red",
    backgroundColor: "lightgray",
  }}
>Styled Text
</h1>