React 컴포넌트 스타일링

CSS 전처리기 중 하나로써, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해줌
SASS에서는 .scss와 .sass를 지원한다.
SASS의 3버전에서 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 CSS의 Supuerset이다.
SASS와 SCSS의 간단한 차이는 {}(중괄호), ;(세미콜론)의 유무정도이고 SCSS의 경우 기존 CSS와 문법적으로는 큰 차이가 없다.
보통 .scss를 좀 더 자주 사용된다고 한다.
node-sass 라이브러리를 통해 SASS를 CSS로 변환한다. ("yarn add node-sass")
@mixin <믹스인이름> () {} // 믹스인 생성
@include <믹스인이름> // 믹스인 호출
@import <SASS 경로>
SASS 또한 yarn이나 npm을 통해서 외부 라이브러리를 쉽게 불러와서 사용할 수 있다.
라이브러리가 설치괸 node_modules에 접근하기 위한 쉬운 방법은 '~' 을 통해 접근
반응형 디자인을 쉽게 만들어주는 'include-media' > yarn add include-media
색상 팔레트인 'open-color' > yarn add open-color
SASS 라이브러리를 불러올때는 node_modules 내부 라이브러리 경로 안에 들어 있는 scss 파일을 불러와야한다.

2.1) sass-loader 설정 커스터마이징

프로젝트 루트 경로에서 "yarn eject" 를 실행하면 config 폴더 밑으로 webpack.config 등 설정파일과 script 폴더 밑으로 build, start, test 스크립트들이 생성된다.
생성된 webpack.config.js 에서 sass-loader에 대한 설정이 가능하다.

CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일 고유마다 고유한 이름을 자동으로 생성해주는 옵션
[파일이름]_[클래스이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술
v2 이상부터는 .module.css 확장자로 파일을 저장하면 CSS Module이 적용된다.
Module에서 만든 클래스는 스타일을 직접 불러온 컴포넌트 내부에서만 동작하기 때문에 클래스 이름을 지을 때 고유성에 대해 고민하지 않아도 된다.
전역으로 사용해야하는 경우 :global 예약어를 통해 글로벌 CSS를 명시해 주고 엘리먼트 속성에 바로 접근 가능
:global로 적용하지 않은 CSS 속성의 경우 적용시 적용하고 싶은 JSX에 {모듈이름.[속성명]} 으로 접근
classnames라는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리를 사용할 수 있으므로 CSS Module을 사용할 때 유용 (yarn add classanmes)
SASS를 사용할 때도 .module.scss 확장자를 사용하면 CSS Module로 사용 가능하다.
CSS Module이 아닌 일반 .css/.scss 파일에서도 :local을 사용하여 CSS Module을 사용할 수 있다.

스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일 작성과 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해주므로 자바스크립트 파일 하나에 스타일까지 적용 가능( 이 부분은 Vue에서도 지원 가능한데, Vue에서는 별도의 설정 없이 사용 가능하다. 이런면에서는 Vue가 절대 꿇리지 않는듯하다)
이 방식을 'CSS-in-JS' 라고 불림
가장 선호하는 라이브러리는 'styled-components'가 있고 설치방법은 'yarn add styled-components'
대체 라이브러리로는 'emotion'가 있다.
styled-component의 가장 큰 장점은 스타일로 정의할 컴포넌트에 props로 data를 전달할 수 있는 기능이다.

여의도에서 쓰는 IT스토리