[리액트를 다루는 기술] 9. 컴포넌트 스타일링

1. 기존

- Webpack의 css-loader를 이용하여 일반 CSS를 불러오는 방식

- 컴포넌트는 이름을 접두어로 붙였음

2. 종류

1) CSS Module

2) Sass

3) styled-components

3.  CSS Module 에서 클래스가 여러개 일때

- <div className={[styles.box, styel.blue].join(' ')}> 

- 사이에 공백을 두고 합치면 됨

4. classnames 라이브러리

- 클래스 여러개를 쉽게 합치기 위한 라이브러리

- <div classNames= {classNames(styles.box, styles,blue)}>

- bind 기능을 이용하면 더 편리하게 이용: styles를 생략

-> const cx = classNames.bind(styles)

-> <div className ={cx('box','blue')}>

- 이를 배열 형식이나 객체 형식으로 혼용해서 사용 가능

- 객체로 사용하게 된다면 조건부 형식으로 유리하게 사용

-> <div className= {cx('box', {blue: isBlue})}>

-> isBlue가 true인 경우 실행됨

5. SaSS

- syntactically awesome style sheets : 문법적으로 매우 멋진 스타일 시트

- yarn add node-sass sass-loader

- sass-loader: webpack에서 Sass를 불러옴

- node-sass: sass로 작성된 코드를 css로 변환

- sass-loader를 이용하려면?

6. sass-loader 설정

- webpack 환경설정 설정해야함

- webpack.config.dev.js

{ loader: require.resolve('sass-loader'),

  options: {...},

}

- css-loader를 사용하지 않으려면

->moduels, localIdenName을 지워야함

7. Sass 적용

- 기존

.box: hover{

baclground: red

}

.box: active { 

baclground: yellow

}

- Sass 적용: &을 사용해서 선택자 참조

.box{

&:hover{

background: red;

}

&:active{

background:yellow;

}

- app.css를 app.scss로 변경

8. Sass 변수 사용

- $size = 100

 -> .box{ width: $size;}

9.믹스인 사용

- 변수: 자주 사용하는 값

- 믹스인: 자주 사용하는 구문

- 선언: @mixin place-at-center{ ... }

- 호출: @include place-at-center();

10. Sass 라이브러리

- include-media, open-color

- include-media: 반응형 디자인을 도와줌

- open-color: 칼라 설정을 도움

- yarn add include-media open-color

- yarn, npm 패키지 내부 파일을 불러올떄는 ~을 사용

11. 예시

const Button = ({children, ...rest}) => {

return(

<div className = {cx('button')} {...rest}>

{children}

</div>

);

};

- ...rest는 따로 지정하지 않은 모든 props를 담는다.

- const obj = { a:1, b:2, c:3 }

- const {a, ...foo} = obj;

- console.log(a) -> 1

- console.log(...foo) -> { b:2, c:3 }

12. styled-compopnents

- css in js

- yarn add styled-components

p184 ~p188 페이지 유실

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"