CSS Modules

CSS Modules 충돌 방지

컴포넌트 가까이에 CSS를 두면서도 전역 클래스 충돌을 피할 수 있어, 작은 UI 단위를 안정적으로 스타일링한다.

사용 흐름

local css

모듈 파일

Button.module.css처럼 컴포넌트와 가까운 CSS 파일을 만든다.

클래스 import

styles 객체로 클래스 이름을 가져와 JSX에 연결한다.

로컬 스코프

빌드 과정에서 클래스명이 고유하게 바뀌어 충돌을 줄인다.

전역 스타일

앱 전체 규칙은 global CSS에 두고 컴포넌트 스타일과 분리한다.

cssimportclassrender
사용 흐름

CSS 모듈은 스타일을 숨기는 것이 아니라 적용 범위를 작게 만든다. 컴포넌트별 책임이 명확할수록 관리가 쉬워진다.