컴포넌트를 스타일링 할 때 다양한 방식을 사용할 수 있다.

• 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식이다.
• Sass : CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해서 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다.
• CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다.
• styled-components : 스타일을 JS 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다.

CSS

CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. CSS 클래스 중복을 방하지하는 여러 방식이 있는데, 그 중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 또 다른 하나는 CSS Selector를 활용하는 것이다.

이름 짓는 규칙

• 컴포넌트 이름-클래스 (ex. App-header) :클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 내는 것을 방지한다.
• BEM 네이밍 (ex.card_title-primary) : 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식

CSS Selector

CSS Selector를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다.
ex. .App 안에 있는 .logo 스타일을 적용하고 싶다면?

.App .logo {
	width : 100px;
    height:32px;
}

ex. .App 안에 들어 있는 header, header는 클래스가 아닌 header 태그 자체에 스타일을 적용하기 때문에 '.'이 생략

.App header {
	background-color:#282c84;
    height:32px;
}

Sass (Syntactically Awesome Style Sheets)

문법적으로 매우 멋진 스타일시트라는 뜻의 Sass는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해준다.
Sass는 두 가지 확장자를 지원한다. 👉 .scss 와 .sass 두 문법은 차이점이 있다.
🧩 .sass

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

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

sass 확장자는 중괄호 ({}) 와 세미콜론 (;)을 사용하지 않는다.
🧩 .scss

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

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

✨💫 Learn Sass

mixin

utils

여러 파일에서 사용될 수 있는 sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필효한 곳에서 쉽게 불러와 사용할 수 있다.
utils 파일 만들기 👉 src/styles/utils.scss

CSS Module

css module은 CSS 를 불러와서 사용할 때 클래스 이름을 고유한 값, [파일이름]_[클래스 이름]_[해시 값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

CRA(create-react-app) v2 부터는 별도의 설정 없이 .module.css 확장자로 파일을 저장하면 css module이 적용된다.
🧩test.module.css

.wrapper{
	background:red;
   padding :1rem;
   color:white;
   font-size:2rem;
}
:global .something{
	font-weight : 800;
   color:aqua;
}

Styled-components 💅🏽

✨💫Learn styled-components

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573