더북(TheBook)

2.4.5 인라인 스타일링

 

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없습니다. 그 대신 CSS 스타일을 자바스크립트 객체 형식으로 만들어 적용해야 합니다. 해당 객체에서 keycamelCase로 작성합니다. 한번 예제를 살펴봅시다.

src/App.js

import React, { Component } from ‘react’;

class App extends Component {
  render() {
    const text = ‘당신은 어썸한가요?’;
    const condition = true;
    const style = {
       backgroundColor: ‘gray’,
       border: ‘1px solid black’,
       height: Math.round(Math.random() * 300) + 50,
       width: Math.round(Math.random() * 300) + 50,
       WebkitTransition: ‘all’,
       MozTransition: ‘all’,
       msTransition: ‘all’
     };

    return (
      <div>
        <h1>리액트 안녕!</h1>
        <h2>{text}</h2>
        { condition && ‘보여주세요’ }
        <div style={style}></div>
      </div>
    );
  }
}

export default App;

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