리액트 컴포넌트 스타일링 - CSS 모듈

리액트 컴포넌트를 스타일링 하는 방법은 sass, css module, styled components 등의 방법이 있다. 그중 CSS 모듈은 기존 css파일이 특정 컴포넌트로 범위가 지정되도록 만든 것이다. css 모듈을 사용하면 class 이름이 중복되는 것을 방지할 수 있다.

사용 방법은 파일 확장자를 파일명.module.css로 만들어서 사용하면 된다. 이것이 브라우저에서 나타날때 코드가 변환되어서 컴포너트에 종속되도록 만들어 준다.

코드 예시는 아래와 같다.

import REact from "react";
import styles from "./파일명.module.css"

function Box(){
    return <div className={styles.Box}> {styles.Box} </div>;
}

export default Box;

레거시 프로젝트에 리액트를 도입할 때나 css 클래스 네이밍 규칙을 만들기 귀찮을 때 등 사용할 수 있다.