[React] 초급 개념9 - 컴포넌트 스타일링 (CSS, Styled-components, Tailwind)

 

리액트에서 컴포넌트 스타일링은 다양한 방식으로 적용할 수 있습니다. 기본 CSS 파일을 사용하는 방법부터, CSS-in-JS, CSS 프레임워크를 활용하는 방법까지 여러 가지 방법이 있습니다.

 

 

✅ 왜 스타일링이 중요한가?

• 사용자 경험(UX)을 개선하고, 가독성이 뛰어난 UI를 구성할 수 있음.
• 유지보수가 용이하며, 확장 가능한 구조를 만들 수 있음.
• 일관된 디자인 시스템을 구축하여 협업이 쉬워짐.

 

✅ 어떤 방식으로 스타일링할까?

• 전통적인 CSS → 간단하고 익숙한 방법이지만, 스타일 충돌 가능성이 있음.
• CSS Modules → 범위를 제한하여 충돌 없이 스타일 적용 가능.
• Styled-components → 컴포넌트 내부에서 직접 스타일을 관리할 수 있어 가독성이 향상됨.
• Tailwind CSS → 미리 정의된 클래스를 조합하여 빠르게 스타일 적용 가능.

---

 

 

🔸 1. 기본 CSS 적용 (CSS 파일 활용)

✅ 전통적인 CSS 파일을 활용하여 스타일을 적용하는 방식

 

 

✅ 예제: CSS 파일 적용하기

 

App.css

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

 

App.js

import "./App.css";

function App() {
  return <div className="container">안녕하세요!</div>;
}

 

📌 설명:

• App.css 파일에서 클래스를 정의한 후, JSX에서 className을 통해 적용
• 전통적인 방식으로 유지보수가 쉬운 장점이 있음

 

💡 이 방식의 장점:

• 별도의 설정 없이 간단하게 적용 가능.
• 모든 브라우저에서 쉽게 사용할 수 있음.

💡 이 방식의 단점:

• 클래스 이름이 전역적으로 적용되므로, 다른 컴포넌트와 충돌할 가능성이 있음.

---

 

 

🔸 2. CSS Modules 활용

✅ CSS 클래스의 범위를 특정 컴포넌트에 한정하여 충돌을 방지하는 방식

 

💡 왜 사용해야 할까?

• 프로젝트 규모가 커질수록 전역 CSS는 유지보수가 어려워짐.
• 동일한 클래스 이름을 다른 파일에서도 사용 가능하여 충돌 방지.

 

 

✅ 예제: CSS Modules 적용하기

 

Button.module.css

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

 

Button.js

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

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

 

📌 설명:

• CSS 파일을 모듈(.module.css) 형태로 정의하여 styles.button처럼 사용 가능
• 같은 클래스 이름이 있어도 컴포넌트 간 충돌이 발생하지 않음

---

 

 

🔸 3. Styled-components (CSS-in-JS)

✅ JSX 내부에서 직접 CSS를 작성하여 스타일을 적용하는 방식

 

💡 왜 사용해야 할까?

• 스타일과 컴포넌트를 함께 관리하여 유지보수가 쉬움.
• 동적 스타일 적용이 간편하여, 조건부 스타일링에 강력함.

 

 

✅ 예제: Styled-components 적용하기

import styled from "styled-components";

const Button = styled.button`
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #218838;
  }
`;

function App() {
  return <Button>클릭</Button>;
}

 

📌 설명:

• styled-components를 사용하면 컴포넌트별 스타일을 독립적으로 관리 가능
• &:hover 같은 CSS 가상 선택자도 지원됨

---

 

 

🔸 4. Tailwind CSS (CSS 프레임워크)

✅ 미리 정의된 클래스를 조합하여 스타일을 적용하는 방식

 

💡 왜 사용해야 할까?

• 클래스 기반의 스타일링을 통해 빠르게 디자인 가능.
• CSS 작성이 필요 없으며, 유지보수가 쉬움.

 

✅ 예제: Tailwind CSS 적용하기

function App() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
      클릭
    </button>
  );
}

 

📌 설명:

• bg-blue-500 → 배경색 지정
• text-white → 글자색 지정
• px-4 py-2 → 패딩 설정
• rounded-lg → 둥근 모서리 적용
• hover:bg-blue-700 → 마우스 호버 시 배경색 변경

---

 

 

🔸 5. 개념 요약

 

✅ CSS 파일을 활용한 전통적인 스타일링 (.css)
✅ CSS Modules로 컴포넌트 간 스타일 충돌 방지 (.module.css)
✅ Styled-components를 활용한 CSS-in-JS 방식 (styled-components)
✅ Tailwind CSS를 활용한 유틸리티 기반 스타일링
✅ 각 스타일링 방식의 장단점을 이해하고 상황에 맞게 선택

---