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 {
- 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 페이지 유실
"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"