2.4.6 인라인 스타일링

    리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있는데요. 이러한 이름은 - 문자를 없애고 카멜 표기법(camelCase)으로 작성해야 합니다. 따라서 background-colorbackgroundColor로 작성합니다.

    다음 예시 코드를 따라 작성해 보세요.

    src/App.js

    import React from 'react';
     
    function App() {
      const name = '리액트';
      const style = {
        // background-color backgroundColor 같이 - 사라지고 카멜 표기법으로 작성됩니다.
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '48px', // font-size -> fontSize
        fontWeight: 'bold', // font-weight -> fontWeight
        padding: 16 // 단위를 생략하면 px 지정됩니다.
      };
      return <div style={style}>{name} </div>;
    }
     
    export default App;

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