<리액트를 다루는 기술> 9장. 컴포넌트 스타일링

1. CSS

: 스타일링하는 가장 기본적인 방법

- CSS를 작성할 때 중요한 점은 CSS클래스를 중복되지 않게 만드는 것

- 이를 방지하는 방식 중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 다른 하나는 CSS Selector를 활용하는 것

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

/* App안에 들어있는 클래스 스타일 적용할 때 (태그 자체에 스타일 적용할 때는 .을 생략) */
.App .logo{ 
  height: 20px;
}

 

2. Sass (Syntactically Awesome Style Sheets)

문법적으로 매우 멋진 스타일시트

- CSS 전처리기(pre-processor)중 하나로 확장된 CSS문법을 사용하여 CSS코드를 더욱 쉽게 작성할 수 있게 해 줌

- 스타일 코드의 재활용성을 높여주며, 코드의 가독성을 높여 유지 보수를 더욱 쉽게 해 줌

- 라이브러리를 쉽게 불러와서 사용할 수 있다는 장점이 있음

 

Sass와 Scss

→ Sass가 처음 나왔을 때는 .sass확장자만 지원되었으나 후에 .scss확장자도 지원하게 됨

/* .sass  → 중괄호({})와 세미콜론(;)을 사용하지 않음 */
body
  font: 24px
  color: red

/* .scss → 보통 .scss 문법이 더 자주 사용됨 */
body {
  font: 24px;
  color: red;
}

 

3. CSS Module

- 스타일을 작성할 때 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 

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

- v2 버전 이상부터는 .module.css 확장자로 파일을 저장하면 CSS Module이 적용됨

 

4. styled-components

- CSS-in-JS 라이브러리, 자바스크립트 파일 안에 스타일을 선언하는 방식 중 하나 

- 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해 줌

- styled-components를 대체할 수 있는 라이브러리로는 emotion이 대표적이며, 작동방식이 꽤 비슷함

👍 자바스크립트 파일 하나에 스타일까지 작성할 수 있어 .css 등 스타일 파일을 따로 만들지 않아도 됨

👍 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있음

 

VS Code Tip.

vscode-styled-component를 설치해야 컴포넌트 내부에 작성한 스타일이 그저 문자열로 간주되지 않고, 코드 신택스 하이라이팅이 제대로 이루어져 색상이 정상적으로 입혀짐