CSS 모듈을 활용한 React 스타일링 심화 학습

우리의 앱 buttons 작업을 계속해 보겠습니다. 이제 기존에 src 폴더에 생성되어 있던 주요 컴포넌트 App을 다룰 차례입니다. 이 컴포넌트에는 두 개의 div, 제목, 버튼이 포함될 것입니다.

규칙에 따라 App.css 파일 이름을 App.module.css로 변경하고, 내용을 비운 다음 몇 가지 태그에 대한 CSS 스타일 클래스를 생성하겠습니다:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

이제 App.js 파일 내용을 지웁니다. 그런 다음 React 컴포넌트 Buttons와 App.module.css의 스타일을 가져옵니다. 태그를 작성하고 스타일을 적용하며, React 컴포넌트 Buttons를 배치합니다:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

우리는 App.module.css에서 가져온 스타일을 포함하는 객체의 이름으로 classes라는 단어를 사용했습니다. 이전 경우와 마찬가지로 이 객체를 원하는 대로 이름 지을 수 있습니다.

몇 가지 작은 단계가 남아 있습니다. 규칙에 따라 index.css 파일 이름을 index.module.css로 변경하고, index.js 파일에서 import 문을 변경하는 것을 잊지 마세요:

import "./index.css";

다음과 같이 변경합니다:

import "./index.module.css";

이제 브라우저에서 우리 앱의 작동 결과를 볼 수 있습니다.

브라우저 개발자 도구에서 생성된 마크업을 열어보면, 각 컴포넌트에 고유한 클래스가 생성된 것을 확인할 수 있습니다. 따라서 더 이상 개별 컴포넌트 간 클래스 충돌을 걱정할 필요가 없습니다.

또한 중요한 점은 CSS 모듈이 일반 외부 CSS 파일을 가져오는 것을 금지하지 않는다는 것입니다.

강의의 이론을 따라, 이전 강의 과제에서 생성했던 앱 inputs의 React 컴포넌트 App를 지우고, 여기에 여러분이 만든 Inputs를 스타일이 적용된 어떤 div 안에 배치하세요. App에 스타일이 적용된 제목을 추가하세요. 이 모든 것을 또 다른 div 안에 넣으세요. React 컴포넌트 App 태그의 스타일은 App.modules.css에 작성하세요.

모든 것을 함께 모아, 남은 파일들을 올바르게 연결하고 여러분의 앱 inputs를 실행하세요.