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