• 목차
• 리액트에서 컴포넌트를 스타일링할 때는 다양한 방법이 있는데 정답은 없으니 각자 취향에 맞춰서 고르거나 회사에서 요구하는 스펙에 따라서 사용하면 돼

9.1 가장 흔한 방식, 일반 CSS

• create react-app을 사용해서 프로젝트를 생성하면 기본적으로 일반 css 방식으로 만들어져있어
  • 아래처럼 import 문을 사용해서 css파일을 불러오면 돼
• 만약 기존의 css 스타일링이 딱히 불편하지 않거나 개발중인 소규모 프로젝트에서 새로운 스타일링 시스템을 적용하는것이 불필요하다면 이미 적용되어 있는 기본 css 시스템을 사용하면 돼

import './App.css';

• css를 작성할 때 가장 중요한 점은 css 클래스를 중복되지 않게 만드는거야
  • 클래스가 중복되는 것을 방지하는 방식중에는
    1. 이름을 지을 때 특별한 규칙을 사용하는 방법과
    2. CSS Selector를 활용하는 방법이 있어

9.1.1 이름 짓는 규칙

• App.css 파일을 읽어보면 클래스 이름이 컴포넌트 이름-클래스 형태로 지어져 있어 (예. App-header)
  • 클래스 이름에 컴포넌트 이름을 넣어서 클래스가 실수로 중복되는것을 방지할 수 있어
• 비슷한 방식으로는 BEM 네이밍이 있어
  • BEM 네이밍은 CSS 방법론 중 하나야
  • 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는거야 (예. card__title-primary)

9.1.2 CSS Selector

• CSS Selector를 사용하면 CSS가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있어

.App .logo {
	...
}

• 이런식으로 컴포넌트의 최상위 html 요소에는 컴포넌트의 이름으로 클래스 이름을 짓고
• 그 내부에서 클래스를 지정하거나 header등의 태그를 사용해서 작성해 줄 수 있어

9.2 Sass 사용하기

• Sass는 CSS 전처리기야
  • 복잡한 작업을 쉽게 할 수 있도록 해주고,
  • 스타일 코드의 재활용성과 가독성을 높여서 유지 보수를 더욱 쉽게 해줘
• Sass는 두가지 확장자를 지원해
  • .scss / .sass
  • 두 확장자의 주요 차이점은
    1. 중괄호의 사용유무
    2. 세미콜론의 사용유무

$font-stack: Helvetica, sans-serif
$primary-color: #333

body 
	font: 100% $font-stack
	color: $primary-color

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}