• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 CSS Module

CSS Module이란 무엇인가요?

CSS Module은 CSS 클래스 이름의 충돌 문제를 해결하기 위한 기술입니다. 규모가 작은 프로젝트에서는 문제가 되지 않지만, 프로젝트가 커지면 동일한 클래스 이름을 실수로 여러 곳에서 사용하는 경우가 많습니다. 이럴 때 CSS가 제대로 적용되지 않거나, 원하지 않는 스타일이 적용될 수 있습니다. CSS Module은 이런 문제를 방지하기 위해 등장했습니다.

CSS Module은 각 CSS 클래스 이름을 고유하게 만들어주기 때문에, 동일한 이름의 클래스라도 다른 컴포넌트에서 충돌하지 않도록 해줍니다.

기존 CSS의 문제점

.aaa {
    color: red;
}

보통 이렇게 CSS 파일에서 .aaa라는 클래스 이름을 선언하면, HTML 파일에서 이를 사용할 수 있습니다.

<button class="aaa">등록하기</button>

이 방식은 간단하고 직관적이지만, 프로젝트가 커질수록 클래스 이름이 중복되면 예상치 못한 문제들이 발생할 수 있습니다. 예를 들어, 두 개의 다른 버튼에 모두 .aaa라는 클래스를 썼다면, 두 버튼 모두에 같은 스타일이 적용될 겁니다. 이를 "CSS 클래스 이름 충돌"이라고 합니다.

CSS Module의 해결 방식

CSS Module은 각 클래스 이름을 고유하게 변환합니다. 예를 들어, .aaa라는 클래스를 정의했다면, CSS Module은 이를 랜덤한 문자열을 포함하는 고유한 이름으로 바꿔줍니다.

아래 사진은 CSS Module을 사용하여 변환된 결과 입니다.

JavaScript에서 CSS Module을 사용하는 방법

HTML에서는 기존 방식처럼 간단히 class="aaa"로 사용하지 않고, JavaScript에서 변환된 클래스 이름을 사용해야 합니다. 다음과 같은 코드가 그 예시입니다:

const styles = {
    aaa: "aaa_ajdkqnvmz" // CSS Module이 생성한 고유한 클래스 이름
}