React에서 CSS 모듈을 사용한 스타일링 학습 시작하기

이번 강의와 다음 강의들에서 우리는 React 컴포넌트를 스타일링하는 또 다른 현대적이고 효율적인 접근 방식인 CSS 모듈 사용을 살펴볼 것입니다.

CSS 모듈은 이 접근 방식에서 컴파일된 별도의 CSS 파일로, 여기서 클래스 이름과 애니메이션 이름은 로컬 스코프에 있어 다른 컴포넌트의 클래스 이름 간 충돌을 피할 수 있게 해줍니다.

시작하기 위해 간단한 React 애플리케이션 buttons를 만들고 실행해 보겠습니다. 이를 위해 빈 폴더 test를 만들고, 그 안으로 이동한 후 터미널에 다음 명령어들을 입력합니다:

npx create-react-app buttons
cd buttons
npm start

React 버전이 최신이고, 즉 Create React App v2 이상을 지원한다면 별도의 설정을 할 필요가 없습니다. 이 경우 CSS 모듈은 자동으로 지원됩니다. 확인하려면 package.json을 살펴보세요, 만약 react-scripts 의존성 버전이 2.x.x 이상이라면, 모든 것이 정상입니다. 그렇지 않다면 React를 업데이트하세요.

CSS 모듈 방식으로 스타일링할 우리의 애플리케이션은 세 개의 버튼을 포함할 것입니다.

우리는 CSS 파일을 다음 규칙에 따라 명명할 것입니다: [name].module.css.

이제 src 폴더 안에 components 폴더를 만들고, 그 안에 버튼에 대한 CSS 스타일이 담긴 파일 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;
}

또한 components 폴더에, 빈 React 컴포넌트 파일 Buttons.js을 생성하세요. 생성된 파일 App.js는 지금은 건드리지 마세요, 나중에 다룰 것입니다!

Buttons.js에서 CSS 스타일 파일을 반드시 임포트하고, 또한 class 속성을 사용하여 각 버튼에 이 스타일들을 적용하세요:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

그런데, 스타일 객체를 임포트할 때 styles라는 단어를 꼭 사용할 필요는 없습니다. 편리한 대로 이름을 지을 수 있습니다.

다음 강의에서 우리 애플리케이션을 완성하겠습니다.

이 강의의 이론에 따라 React 애플리케이션 inputs를 생성하세요.

강의에서 제시된 CSS 모듈 접근 방식을 사용하세요. inputs 애플리케이션의 src 폴더에 React 컴포넌트 Inputs를 위한 파일 Inputs.js을 생성하고, 세 개의 입력 필드를 포함하도록 하세요. Inputs.modules.css에 입력 필드에 대한 몇 가지 스타일을 작성하세요. 이 파일을 Inputs.js에 임포트하고 스타일을 적용하세요.