리액트에서 css사용하기

송승찬·2020년 9월 5일
0

TIL

목록 보기
18/52

리액트에서 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
profile
superfly

0개의 댓글