React에서 CSS를 임포트할 때 실제로 발생하는 일과 그 범위를 제한하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자, CSS와 스타일 관리에 관심 있는 개발자 (중간 난이도)

핵심 요약

  • 기본 CSS는 전역적으로 적용된다. import './App.css'를 사용하면 모든 컴포넌트에 적용됨.
  • CSS 모듈을 사용하면 _Button_primary_abc12388과 같은 유니크한 클래스 이름을 자동 생성하여 범위 제한 가능.
  • CSS-in-JS 라이브러리(예: styled-components)는 JavaScript 내부에서 CSS를 정의하고 동적 스타일 적용 가능.

섹션별 세부 요약

1. 기본 CSS 행동(전역 CSS)

  • import './App.css'를 사용하면 모든 DOM 요소에 해당 CSS가 적용됨.
  • 클래스 이름이 중복되면 스타일 누수(style leakage) 발생 가능.
  • 컴포넌트 내부에서 CSS를 임포트해도 전역 스타일에 영향을 줄 수 있음.

2. 컴포넌트 수준에서 CSS 임포트 이유

  • 구조 정리개발자 가독성 향상을 위해 컴포넌트별 CSS 파일을 분리.
  • 기술적으로는 전역 스타일이지만, 관리 편의를 위해 사용됨.

3. 스타일 누수 방지: CSS 모듈

  • 파일명을 Button.module.css로 변경하고 import styles from './Button.module.css'로 임포트.
  • 자동으로 _Button_primary_abc12388과 같은 유니크한 클래스 이름 생성.
  • 중복 클래스 이름 문제 해결 및 스타일 범위 제한 가능.

4. CSS-in-JS: `styled-components` 사용법

  • import styled from 'styled-components'로 임포트 후,
  • const Button = styled.button`
      background-color: blue;
      color: white;
    `;
  • 동적 스타일 적용 가능(예: props, 테마 기반).
  • 컴포넌트별 스타일 범위 자동 제한.

결론

  • CSS 모듈 또는 CSS-in-JS 라이브러리(예: styled-components) 사용을 권장.
  • 전역 스타일은 스타일 누수관리 복잡성 증가로 인해 피해야 함.
  • styled-components동적 스타일컴포넌트 범위 제한이 동시에 가능.