[REACT] 컴포넌트 스타일링

일반 CSS

• 컴포넌트를 스타일링하는 가장 기본적인 방법
• import

// App.js

import './App.css';

• BEM naming
  • 이름을 지을때 해당 클래스가 어디에 사용되는지 명확하게 작성하는 방식
  • EX) .card-title-primary

 

Sass

• 전처리기
  1. Sass
  2. Less
  3. Stylus
  4. PostCSS
• 이 중 Sass, Less가 가장 많이 쓰이는 듯 하다.
• Less 사용자로서 Less의 문법이 더 쉽다.
• SCSS와 SASS의 차이는 중괄호, 세미콜론의 유무 차이다.
• 사용
  1. node-sass 설치
• utils 함수 분리하기
• sass-loader 커스터마이징
• node_modules에서 라이브러리 불러오기
  
  • @import '~' 를 사용하면 '../../' 없이 편하게 불러올 수 있다.

// yarn add
yarn add open-color include-media

// import
@import '~include-media/dist/include-media';
@import '~open-color/open-color';

 

CSS Module

• '.module.css' 확장자로 저장하면 CSS Module이 적용된다.
• 해당 파일의 해시값이 이름에 붙으므로, 다른 파일의 클래스 이름과 같아도 영향을 주지 않는다.
• 따라서 다른 파일이면 같은 클래스 이름을 써도 상관없다.
• 사용

// styles.module.css
.title{
	color: blue;
}
.big{
	font-size: 100px;
}
// global
:global .something{
	font-weight: 800;
}

// styles.js
@import styles from './styles.module.css';

<span className={styles.title}>Hello, world!</span>

// 2개 이상
<span className={`${styles.title} ${styles.big}`}>Hello, world!</span>

• classnames
  • 클래스를 조건부로 줄 때 사용

// add
yarn add classnames

// js
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

<div className={cx('wrapper','inverted')}>
</div>

• REACT, SASS를 사용하지 않고 LESS만 썼을땐 이렇게까지 복잡하지 않았는데,
  REACT가 어려운건지 SASS가 어려운건지 잘 모르겠다.

styled-components

• CSS-in-JS

// add
yarn add styled-components

• JS코드 안에 CSS 스타일을 작성할 수 있다.
• Tagged 템플릿 리터럴
  • `` 를 사용한 문법
  • 자바스크립트 객체나 함수를 전달할 수 있다.
  • 사용하지 않으면
    • [object Object]로만 나오는 오류가 발생한다.
    • 함수는 내용이 그대로 문자가 되어 나온다.