더북(TheBook)

스타일을 직접 넘겨주는 다른 예제를 살펴보자. <span>에 붉은색으로 외곽선을 표시한다.

<span style={{borderColor: 'red',
  borderWidth: 1,
  borderStyle: 'solid'}}>Hey</span>

 

다음과 같이 축약하여 문자열로 작성할 수도 있다.

<span style={{border: '1px red solid'}}>Hey</span>

 

스타일 속성으로 이해하기 어려운 문자열 대신 자바스크립트 객체를 사용한 이유는 이를 이용해 React가 뷰를 더 빠르게 변경할 수 있기 때문이다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.