# CSS 스타일 추가

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

{% tabs %}
{% tab title="Button.css" %}

```css
.button {
  padding: 20px;
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Button.js" %}

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

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

{% endtab %}
{% endtabs %}

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

{% hint style="success" %}
이러한 CSS 호출 방식이 React 앱 개발에 반드시 필요한 것은 아니지만, CSS의 [BEM 표기 방법론을 JavaScript 컴포넌트에서 손쉽게 활용할 수 있는 이점](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b)이 있습니다.
{% endhint %}