CSS 모듈 클래스 이름 변환 파이프라인

개발자는 .container , .myButton 처럼 평소의 CSS를 작성하지만, 컴포넌트에서는 styles.myButton 으로 접근하고 브라우저에는 파일명과 해시가 조합된 고유 클래스가 남는다.

1

원본 CSS 파일

파일명에 .module 이 들어가면 클래스 이름을 지역 스코프로 취급한다.

2

styles 객체 매핑

import된 객체는 원래 클래스 이름을 고유 클래스 문자열로 연결한다.

3

JSX와 DOM 결과

JSX에서는 속성으로 읽고, 브라우저에는 충돌하지 않는 해시명이 남는다.

핵심CSS 모듈 클래스 이름 변환 파이프라인은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.