4) CSS Styling

Intro

React에서는 컴포넌트별로 파일을 나눠서 개발을 진행합니다.

예를 들어 Header.tsx, Footer.tsx 등 각각의 컴포넌트를 만든다고 가정할 때, 우리가 일반적으로 사용하던 App.css, style.css 같은 전역 CSS 파일은 모든 컴포넌트에 영향을 줄 수 있습니다.

// app.css
.title {
  color: red;
  font-size: 24px;
}

// Header.tsx와 Footer.tsx에서 둘 다 className="title" 사용
<h1 className="title">헤더입니다</h1>
<h1 className="title">푸터입니다</h1>

이 경우, 두 요소는 동일한 스타일이 적용되며, 원치 않는 **스타일 충돌(bug)**이 발생할 수 있습니다. 그래서 등장한 것이 바로 CSS Module입니다.

1. CSS Module

• css파일에 .module.css 확장자 추가

• css module에 추가한각 클래스명은 자동으로 고유한 이름으로 변환됩니다.

• 따라서, 다른 컴포넌트와 클래스명이 겹쳐도 충돌하지 않으므로 컴포넌트 단위로 스타일을 안전하게 관리할 수 있습니다.

Header.module.css
.title {
  color: blue;
  font-weight: bold;
}

Header.tsx
import styles from './Header.module.css';

function Header() {
  return <h1 className={styles.title}>헤더입니다</h1>;
}

• styles.title -> title_abcd와 같이 고유한 클래스명으로 변경

2. Tailwind CSS

• React에서 매우 인기 있는 CSS 프레임워크

• 직접 스타일을 쓰지 않고, 미리 정의된 클래스명들을 조합해서 UI를 만듭니다.

• 마치 레고 블록을 조립하듯 디자인을 만들어 나가는 방식입니다.

function Button() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
      클릭하세요
    </button>
  );
}