[React] 컴포넌트 스타일 알아보기

1) SASS, SCSS

- CSS pre-processor 라고도 부른다.

 

- 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주고 유지보수를 쉽게 할 수 있다.

 

- 파일 확장자 2가지를 사용한다. ( .sass / .scss )

 

- 참고하면 좋은 사이트

https://sass-lang.com/guide

Sass: Sass Basics

 

- 아래 명령문으로 5.0.0 버전 설치하기

yarn add node-sass@5.0.0

 

- 아래 명령문으로 설치해주기

❗ sass-loader를 사용하기 위해 node-sass 버전이 4.x 또는 5.x이어야 함. 현재 버전은 6.x가 설치됨

yarn add node-sass

 

- 아래 명령문으로 삭제하기

yarn remove node-sass

 

- classnames 설치하기

 

🎀 css 클래스 문자열 조합을 쉽게 할 수 있는 모듈

yarn add classnames

위 모듈을 쓰면

classNaems('Button', 'size'); ---> Button size 로 인식된다.

또는

 

 

 

2) CSS Module

- 컴퍼넌트 스타일시 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다.

 

- .module.css 으로 저장하여 사용한다. ex) 파일명.module.css

 

 

3) styled-components

- js 안에 css를 작성하는 것을 말한다.

 

- emotion, styled-jsx 등과 비슷한 라이브러리이다.

 

- Tagged Templete Literal 문법을 사용한다.

 

- 아래 명령어로 설치해주기

 yarn add styled-components

 

 

 

3) polished

- 스타일 관련 유틸 함수이다.

 

- 아래 명령어로 설치해주기

yarn add polished