<aside> 💡 스타일을 적용하는 방식은 크게 CSS, CSS-in-CSS(Sass 등), CSS-in-JS(styled-components 등)으로 나뉩니다. 프로젝트에 따라, 참여하는 인력에 따라 방식을 논의해보시면 좋습니다.

</aside>

1. module.css

• 기본 세팅 코드

일반적인 상황에서

처음 create-react-app을 설치하면 볼 수 있는 CSS 파일과 JS파일입니다.

index.js에 index.css를 import 하게 되면 전역으로 CSS가 적용됩니다. App.js에 App.css를 import하게 되면 App 컴포넌트에 들어있는 모든 컴포넌트에 적용됩니다.

부모 컴포넌트에서 import한 css는 자식까지 자동으로 적용되고, 자식 컴포넌트에 새로 css를 적용하게 되면 부모의 스타일은 자식컴포넌트에 import된 스타일이 덮어쓰게됩니다. 따라서 리액트에서도 기본적으로 CSS 선택자 우선순위가 적용되며, 컴포넌트에 스타일을 사용하는게 결국 다른 컴포넌트의 스타일에도 영향을 미친다는것을 알 수 있습니다.

div {
  margin: 40px;
  background: blanchedalmond;
}
h2 {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: Red;
}

import "./App.css";

div {
  background: pink;
}
h2 {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: lemonchiffon;
}

import "./Question.css";