React에서 CSS modules의 composes 클래스 명령어

이번 강의에서는 CSS modules에서 한 CSS 클래스의 스타일을 다른 클래스에서 재사용하는 매우 유용한 방법을 살펴보겠습니다.

지난 강의들에서 만들었던 buttons 애플리케이션으로 돌아가 보겠습니다. Buttons.module.css 파일을 살펴보세요:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

모든 버튼에 동일한 border-radius와 font-size를 적용하고 싶다고 가정해 봅시다. 물론 각 클래스에 동일한 속성을 반복해서 작성할 수도 있겠지만, CSS modules의 composes 명령어를 사용하면 다른 방식으로 작업할 수 있습니다.

먼저, 예를 들어 common-btn과 같은 새로운 클래스를 생성하여 이 공통 속성들을 넣겠습니다. 그리고 다른 클래스에서 이 클래스의 속성들을 적용하려면 다음 구문을 사용해야 합니다:

selector {
	composes: class-name;
}

이제 우리의 Buttons.module.css 코드는 다음과 같이 보일 것입니다:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

지난 강의들의 과제에서 만들었던 React 애플리케이션 inputs를 가져오세요. 모든 입력 필드에 대해 값이 동일한 몇 가지 공통 CSS 스타일을 추가하세요. 이 스타일들이 작성된 추가 클래스를 생성하세요. composes를 사용하여 이 스타일들을 입력 필드의 다른 모든 클래스에 적용하세요.