[React] CSS Module - Component에 style 주기

앞서 포스팅한 create-react-app을 통해서, 특정 컴포넌트를 위한 css 파일을 만들 수 있는 기능을 사용할 수 있다.

먼저 css를 사용하는 방법에는 두 가지 선택지가 있는데 아래와 같다.

1. 하나의 style 파일 만들기
2. component 마다 style 파일 만들기

 

1. styles.css 파일

styles.css 파일을 만들어 사용하는 것은 간단하다. css 파일에 넣고싶은 css코드를 작성하고, index.js에서 styel.css파일을 import를 해주면 된다.

    index.js

import "./styles.css";

하지만 이 방법은 css파일이 적용하려는 파일의 모든 부분에 import 된다는 단점이 있다.

 

2. component 마다 style 파일 만들어주기 - CSS Module

CSS Module 이라는 기술은, 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS 클래스가 중첩됨을 방지할 수 있다.

CRA로 만든 프로젝트에서 CSS Module을 사용할 때는, CSS 파일의 확장자를 .module.css로 하면된다. 예시를 들면 다음과 같다. 버튼 컴포넌트를 새롭게 만들어서 스타일링을 해주기 위해 Button.module.css 라는 파일을 만들었다.

    Button.module.css

.btn {
  color: white;
  background-color: tomato;
}

리액트 컴포넌트 파일에서 해당 css 파일을 불러올 때, css 파일에 선언한 클래스 이름들이 모두 고유해진다.
그리고 Button 컴포넌트를 만들면 다음과 같이 코드를 작성한다.

    Button.js

import propTypes from "prop-types";
import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

Button.propTypes = {
  text: propTypes.string.isRequired,
};

export default Button;

Button.module.css 파일을 import 해준 뒤,
className을 설정할 때, styles.btn처럼 import로 불러온 styels 객체 안에 있는 값을 참조해야 한다.

 

+

참고

https://react.vlpt.us/styling/02-css-module.html

2. CSS Module · GitBook