• 목차

개요

• 컴포넌트를 만들고 CSS 를 사용하여 스타일을 지정해보자.
• src/index.css

App.js

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <div className='card'>
        <h2>TITLE</h2>
        <div className='actions'>
          <button className='btn'>Delete</button>
        </div>
      </div>
    </div>
  );
}

export default App;

• HTML 에서는 CSS 를 적용하기 위해 HTML element 의 Attribute 인 class 를 사용한다.
• 하지만 해당 컴포넌트의 코드는 표준 자바스크립트로 변환이 된다.
  • 자바스크립트에서 class 는 키워드이다.
• 바닐라 자바스크립트에서 CSS class 를 할당할 HTML Object의 property 이름은 className 이다.

요약

• CSS class 를 적용하기 위해서는 className 속성을 통해 적용해야 한다.
• 컴포넌트 내부에 HTML 코드는 자바스크립트임을 인지해야 한다.