리액트 CSS관련 라이브러리

css 작업의 종류에는 몇가지가 있다.

 

1. 순수 CSS파일로만 작성하는 방법

2. Sass

3. CSS module 

4. styled-components

 

살펴보자. 

문법은 약간씩 다르다. css의 JS같은 느낌?

 

1. Sass 장점

  1) 자주쓰는 CSS 스타일 분리해서 사용가능

  2) sass-loader 설정 커스텀마이징 가능 : 1) 경우나 여러폴더 안에서 해당 scss 파일 찾아야하는 경우 용이

  3) node_modules에서 불러오기 가능 : 파일이 겁나게 많다..

 

2. CSS Module 장점

   1) className이라는 라이브러리 사용가능 : 클래스 묶어서 사용가능

   2) Sass와 혼합해서 사용가능 : Modules.css 를 Modules.scss 로 변경해서 사용가능. 코드 변경 약간 해줘야함.

   3) CSS 모듈이 아닌 파일에서 CSS 모듈사용하기.

   4) 스코프 관련 문제 해결됨.

 

3. styled-components 

   1) 현존하는 리액트 CSS-in-JS 관련 라이브러리 중에서 가장 잘 나가는 라이브러리. 

   2) 자바스크립트 파일안에서 css를 작성하는 형태임.

   3) 대체제로는 emotion이 있음.

   4) 서버사이드 랜더링도 지원됨.

 

선택은 본인 몫.

 

참고자료 : https://velog.io/@velopert/react-component-styling#nodemodules-%EC%97%90%EC%84%9C-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0