바닐라 CSS를 React에서 사용하는 방식
React에서는 일반 CSS 파일을 만들어서 컴포넌트 내부에서 import './파일명.css' 형태로 불러오기만 하면 바로 사용할 수 있다.
즉, 기존 프로젝트에서 쓰던 CSS 그대로 사용 가능하며, 별도의 설정이나 CSS-in-JS 같은 특별한 문법 없이도 적용된다.
장점
1) JSX와 스타일이 분리된다
- 스타일은
.css파일에만 작성하므로 컴포넌트 로직과 시각적 코드가 분리되어 구조가 단순해진다.
2) 기존 CSS를 그래도 활용할 수 있다
- 새로운 문법을 익히지 않아도 되고, 바닐라 CSS 경험이 있는 개발자 또는 디자이너가 작성한 파일을 바로 가져와 사용할 수 있다.
3) 협업에 유리하다
- 컴포넌트 개발자와 스타일 작성자가 서로 다른 파일에서 일할 수 있어 충돌이 적고 역할 분리가 명확하다.
4) 설정이 거의 필요 없다
- React(Vite, CRA 등) 환경에서는 CSS 파일을 import만 하면 바로 적용되므로 초기 설정이 단순하다.
단점
1) 스타일이 컴포넌트에 스코프되지 않는다 (전역 적용)
Header.css에서 작성한.p {}규칙이 Header 컴포넌트뿐 아니라 프로젝트 내 모든<p>요소에 적용된다.
→ 스타일 충돌(clash) 발생 가능성이 매우 높음
2) 예측하기 어려운 스타일 상호작용
- 작은 CSS 수정이 전혀 의도하지 않은 다른 컴포넌트 UI에 영향을 줄 수 있어 프로젝트가 커질수록 유지보수 난이도 증가.
3) 전역 CSS의 특성을 그대로 갖는다
- CSS 파일을 여러 개로 나눠도 전부
<head>에 합쳐져 전역 스타일로 동작한다.
→ 컴포넌트 기반의 React 철학과는 다소 어울리지 않는 부분
이 단점이 CSS Modules, CSS-in-JS 같은 대안이 등장한 핵심 이유다.
