CSS 스타일 추가

웹 스타일 문서 ▸ JS 파일에서 불러오기

CRA 설정은 모든 에셋을 처리하기 위해 Webpack을 사용합니다. Webpack은 JavaScript 파일을 포함해 다양한 파일을 불러와 사용 할 수 있도록 설정합니다. JavaScript 파일에서 CSS 파일을 불러오면 Webpack에 의해 처리됩니다.

Button.css

.button {
  padding: 20px;
}

Button.js

// Webpack에 Button.js 파일이 Button.css 파일을 사용한다고 알립니다.
import './Button.css';

function Button(props) {
  return (
    <button type="button" className="button" {...props} />
  )
}

개발 과정에서 JavaScript에서 호출 된 수 많은 CSS 파일 코드는 빌드(배포) 과정에서 하나의 CSS 파일로 출력되어 정적 HTML 파일에 연결됩니다.

이러한 CSS 호출 방식이 React 앱 개발에 반드시 필요한 것은 아니지만, CSS의 BEM 표기 방법론을 JavaScript 컴포넌트에서 손쉽게 활용할 수 있는 이점이 있습니다.