CSS 모듈화

✒️ 2025-05-16 11:48 내용 수정정

참고 자료 : TCPSchool React CSS Module

• React에서 css를 사용하다 보면 특정 css 파일을 import하지 않은 페이지에도 같은 이름의 클래스가 있을 때 css가 원치 않게 적용될 때가 있다.
  • React 참고.
• 특히 bootstrap을 같이 사용할 때 클래스 이름이 같은 스타일을 css 파일에 설정하게 되면 css가 꼬일 가능성이 높다.
• 이런 문제를 해결하기 위해 css 파일을 모듈화해서 적용하는 방법으로 꼬임 문제를 해결할 수 있다.

모듈화 설정

1. css 파일을 파일이름.module.css 형식으로 만든다.
2. css 파일에 사용하고자 하는 클래스 이름과 스타일을 작성한다.

/* test.module.css  */

.box { /* 사용할 className */
	color : blue, text-align : center 
}

.container { 
	width: 100%; margin : 30px auto; padding: 0; 
}

3. css를 적용할 js 파일에서 css 파일을 import하고, styles.클래스이름으로 스타일을 적용할 element에 css를 적용한다.

import styles from "파일경로/test.module.css"; // 모듈화한 css 파일 가져오기
import 'bootstrap/dist/css/bootstrap.min.css'; // bootstrap

function Test() {
	return( 
	<> 
		<div className={ styles.box }>css module class 적용</div> 
		
		<div className={`${styles.box} ${styles.container}`}> 
			css module 파일에 있는 class 여러 개 적용하기 
		</div> 
		
		<div className={ `${styles.box} ${styles.container} d-flex justify-content-center` }> 
			css module과 bootstrap 함께 적용하기 
		</div>
	</> 
	) 
}
export default Test;