리액트에서 css사용방식
.css파일
- 작은 프로젝트서 사용시
- 간편 그러나 속성 클래스 이름 겹칠때 오류 발생
- 중복 방지를 위해 컴포넌트명-클래스 방식 이름이나 css선택자 활용
- ex ) .App-header/ .App-link (컴포넌트-클래스명)
다음과 같이 2개의 파일에서 같은 클래스를 사용한다 해보자
big_btn.css
.button {
width:200px;
}
small_btn.css
.button {
width:100px;
}
이렇게 어떤 속성값 이름이 중복될시,가장 나중의 것만 반영됨
따라서 예상치 못한 동작 발생filename.module.css
big_btn.css
.button {
width:200px;
}
small_btn.css
.button {
width:100px;
}
css Module 은 css클래스를 불러와서 사용시 [파일이름]_[클래스이름]__[해쉬값] 형태로 옴
해시값이 존재하기에 따라서 같은 클래스 이름도 구분이 자동으로 되므로 편하게 사용하면 된다.
클래스네임을 불러오고 사용하는 게 조금 불편해서
classnames라는 모듈을 사용하고는 하는데 그래도 불편한 것 같다.sass
- npm i node-sass(sass를 css로 변환해줌)
$변수명으로 값을 가져올 수 있다.- filename.module.scss로 사용가능
style.scss
$font-size:1rem;
$primary-color: #333;
p {
font: $font-size;
color: $primary-color;
}css-in-js
- css를 js안에서 사용
- js처럼 css코드의 재사용 및 동적 사용 가능
- 대표적으로 styled-component
superfly