46일차[React style 적용하기]

진하의 메모장·2025년 3월 13일

React react style 복습 스타일 모듈화 자바스크립트

공부일기

목록 보기

52/66

2025 / 03 / 13

오늘 수업 시간에는 React에서 스타일을 적용하는 방법을 배웠습니다.
그리고 저번 시간에 이어 컴포넌트를 만드는 방법을 다시 복습하였습니다.
하루 종일 CSS 적용 방법만 배웠는데, 나름 괜찮았습니다.

💌 React style

CSS 모듈화

CSS 파일을 컴포넌트 단위로 독립적으로 관리하는 방식입니다.

작성한 CSS를 해당 컴포넌트에서만 사용할 수 있게 만드는 방식입니다.

CSS 클래스 이름이 전역적으로 공유되지 않고, 컴포넌트 단위로 스코프가 제한됩니다.

CSS 모듈을 사용하면 클래스 이름 충돌을 방지할 수 있습니다.

1. CSS 모듈화의 장점

1) 스타일 충돌 방지

CSS에서는 클래스 이름이 전역적으로 적용되기 때문에, 다른 컴포넌트에서 같은 이름을 가진 클래스가 있으면 스타일이 겹칠 수 있습니다.

컴포넌트의 스타일이 독립적으로 관리되어 충돌을 방지할 수 있습니다.

CSS 코드

/* Button.module.css */
.button {
  background-color: blue;
}

JSX 파일

// Button.js
import React from 'react';
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}

export default Button;

Button.module.css 파일에서 정의된 .button 클래스는 Button 컴포넌트에서만 적용됩니다.
다른 컴포넌트에서 .button이라는 클래스가 있더라도 충돌하지 않습니다.

2. 컴포넌트 단위 스타일링

스타일이 컴포넌트에 한정되므로, 컴포넌트가 독립적으로 재사용 가능합니다.

CSS 코드

// Card.module.css
.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

JSX 파일

// Card.js
import React from 'react';
import styles from './Card.module.css';

function Card({ children }) {
  return <div className={styles.card}>{children}</div>;
}

export default Card;

Card 컴포넌트를 재사용할 때 Card.module.css 스타일이 다른 컴포넌트에 영향을 미치지 않으며, 독립적으로 관리됩니다.

3. CSS의 로컬화

각 클래스나 아이디의 이름을 유니크한 값으로 변경하여 충돌을 방지합니다.

다른 컴포넌트에서 동일한 클래스 이름을 사용해도 충돌하지 않습니다.

4. 자동 클래스 이름 해싱

React는 클래스 이름을 자동으로 해싱하여 고유하게 만들어줍니다.

글로벌 네임스페이스에 클래스 이름이 겹칠 일이 없습니다.

💌 CSS 모듈화 사용법

1. 파일 확장자

CSS 모듈을 사용하려면, 파일 확장자를 .module.css로 설정합니다.

2. CSS 모듈 가져오기

CSS 모듈을 import 할 때는 JavaScript 객체처럼 사용됩니다.

App.js

import React from 'react';
import styles from './App.module.css';

function App() {
  return <div className={styles.container}>Hello World!</div>;
}

export default App;

App.module.css

.container {
  background-color: lightblue;
  padding: 20px;
}

styles.container는 App.module.css 파일에 정의된 .container 클래스를 고유한 이름으로 변환하여 적용합니다.

💌 사용 시 주의할점

클래스 모듈화를 사용할 때 주의할점입니다.

1. 클래스 이름 유니크화

CSS 모듈은 자동으로 클래스 이름을 해싱하여 고유하게 만듭니다.

CSS 파일을 임포트할 때마다 파일 내용이 다르게 적용될 수 있습니다.

동일한 이름을 가진 클래스가 여러 컴포넌트에서 사용되더라도 충돌하지 않습니다.

중복된 클래스 이름을 작성하려면, 각 파일에서 클래스를 관리하는 방식에 주의가 필요합니다.

2. props로 전달하는 방식

style={{ }} 객체로 전달하거나 inline 스타일을 사용하는 경우가 많습니다.

이런 CSS 모듈을 사용하면 스타일링이 가독성이 떨어지거나 유지보수가 어려울 수 있습니다.
// 불편한 스타일링 방식
function Button({ bgColor }) {
  return <button style={{ backgroundColor: bgColor }}>클릭</button>;
}
// CSS 모듈을 사용할 때
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>클릭</button>;
}

💌 정리하기

React 스타일 모듈화는 다음과 같은 장점과 특징을 가지고 있습니다.

1. 스타일 충돌 방지

각 컴포넌트의 스타일이 독립적으로 관리됩니다.

2. 재사용성 증가

스타일이 컴포넌트에 종속되므로 재사용성이 높습니다.

3. 유지보수 용이

각 컴포넌트의 스타일을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.

46일차 후기

CSS를 객체 형태로 그냥 넘겨주는 것보다 모듈화를 진행해서 접근하는 방식이 확실히 이해하기도 편하고 딱 봤을 때 헷갈리는 부분이 없는 것 같습니다.

생각보다 별로 내용이 없는 것 같은데 오늘 7시간 동안 배웠다는게 믿기지 않습니다..

CSS를 모듈화해서 사용할 수 있다는 점이 흥미로웠고, 살짝 귀찮은 부분이 아닌가.. 라는 생각을 했었는데 사용해보니까 코드가 간결해지고 부분별로 나눠져 있어서 보기에 편했습니다. o͡͡͡͡͡͡͡͡͡͡͡͡͡͡╮(｡ᐤヮᐤ｡)╭o͡͡͡͡͡͡͡͡͡͡͡͡͡͡