[ vite+React 기초학습 4]컴포넌트 스타일링 방법 (CSS 모듈, 스타일 객체)

스타일링이란 무엇인가

웹에서 스타일링이란 텍스트 크기, 색상, 배경, 레이아웃 등을 설정해 사용자 인터페이스를 시각적으로 꾸미는 작업입니다. React에서는 전통적인 CSS 외에도 다양한 방식으로 스타일을 적용할 수 있습니다.

기본 개념

• 전역 CSS: 일반 CSS 파일을 import해서 사용
• CSS 모듈: 컴포넌트 단위로 CSS를 캡슐화
• 인라인 스타일: 스타일 객체를 이용해 JSX에 직접 지정

주요 사용 위치/상황

• 컴포넌트 단위의 스타일 분리
• 빠르게 스타일을 적용할 때
• 전역 스타일과 충돌을 피하고 싶을 때

구체적 코드 예시

// CSS 모듈 예시 (App.module.css)
.title {
  color: blue;
  font-size: 24px;
}

// JSX 파일에서 사용
import styles from './App.module.css';

function App() {
  return <h1 className={styles.title}>Hello</h1>;
}

핵심 요점 정리

• 스타일링 방식은 프로젝트 상황에 따라 선택합니다
• CSS 모듈을 사용하면 클래스 이름 충돌을 방지할 수 있습니다
• 인라인 스타일은 간단한 스타일에 적합합니다

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.