React 에 CSS를 입히는 방법 결정하기

</aside>

목차

React는 서비스의 UI를 잘 만들기 위해 도와주는 라이브러리다. 그런 만큼 보여지는 부분에 최적화 되어있다. 그래서 우리는 보여지는 요소를 다루는 CSS를 리액트에 잘 입힐 수 있도록 공부해야 한다. 오늘은 그 내용을 깊게 공부 해보고자 한다.

가장 먼저 CSS 파일 이름에 Box.module.css 다음과 같이 module.css로 표기를 한다.
컴포넌트에 해당 CSS를 import 할 때, import Style from "./Box.module.css" 처럼 불러오면 Style 객체가 생성되어 module.css에 있는 클래스, 아이디 등의 CSS 요소를 참조하여 불러온다.
모듈로 불러온 CSS는 자동으로 해싱 처리가 된다. 그래서 프로젝트 내부에 동일한 이름의 클래스가 있더라도 해싱을 다르게 처리하기 때문에 충돌 문제가 발생하지 않는다. (그래도 클래스명은 구분하자.)

import Style from './Box.module.css';

export default function Box() {
	return <button className={ Style.bigBox } />
}

흔히 사용하는 sass를 당연하게도 리액트에서 사용할 수 있다.
리액트 프로젝트에서 sass를 사용하기 위해서는 node-sass 패키지를 설치해야 한다.
파일 이름은 Box.module.scss 처럼 작성해주면 된다.
sass의 장점은 다른 파일에서 사용한 css 속성을 변수처럼 저장하고 서로 공유할 수 있다는 점이다. **$로 지정하고, @import**하면 된다.

@import "./shared.scss";

.big {
	width: 100px;
	background-color: $sharedBlue;
}