React 에서 스타일을 적용 종류
- 인라인 스타일
- 일반 CSS
- CSS Modules ( 예 : Button.module.css )
- styled-components (CSS-in-JS)
- Tailwind CSS
- SCSS(Sass)
React 에서 스타일을 적용 방법
일반 CSS 파일 사용
.css 파일을 만들고 컴포넌트에서 import
📁 Button.css
.button {
background-color: black;
color: white;
padding: 12px 20px;
border-radius: 6px;
}
📁 Button.jsx
import './Button.css';
function Button() {
return <button className="button">Click</button>;
}
장점
- 가장 단순함.
- 기존 HTML/CSS 개발 방식과 동일
단점
- 클래스 이름 충돌 가능
- 대규모 프로젝트에서 관리 어려움.
인라인 스타일
style 속성에 JS 객체를 직접 넣음.
function Button() {
const style = {
backgroundColor: 'black',
color: 'white',
padding: '12px 20px',
borderRadius: '6px'
};
return <button style={style}>Click</button>;
}
// 또는 직접 작성
function Button2() {
return <button style={{ color: isActive ? 'red' : 'gray' }}>
}
장점
- 동적 스타일링에 매우 강함
- 조건부 스타일링 쉬움
단점
- hover, media query 사용 불가
- 코드가 지저분해질 수 있음
CSS Modules (실무 추천)
파일명을 Button.module.css 로 만들기
CSS Modules + SCSS 조합은 지금도 실무에서 꽤 안정적인 선택
CRA, Vite, Next.js 같은 환경이면 기본 지원.
Webpack 같이 직접 설정하는 경우에 CSS Modules 설치 필요.
- 직접 만든 React 환경
- 옛날 레거시 Webpack 설정
이 경우엔 css-loader 설정이 필요함.
하지만 요즘은 거의 없음.
| 환경 |
CSS Modules 설치 필요? |
| CRA (Create React App) |
❌ |
| Vite |
❌ |
| Next.js |
❌ |
| SCSS |
SASS만 설치 |
| 커스텀 Webpack |
설정 필요 |
📁 Button.module.css
.button {
background: black;
color: white;
}
📁 Button.jsx
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click</button>;
}
📁 변환된 모습
<button class="Button_button__3Hjks">
장점
- 클래스명이 자동으로 해시처리됨
- 충돌 방지
- 실무에서 매우 많이 사용
styled-components (CSS-in-JS) - 설치 필요
설치
npm install styled-components
사용예시
import styled from 'styled-components';
const Button = styled.button`
background: black;
color: white;
padding: 12px 20px;
border-radius: 6px;
&:hover {
background: gray;
}
`;
function App() {
return <Button>Click</Button>;
}
장점
- 컴포넌트와 스타일이 완전 결합
- hover, media query 가능
- props 기반 동적 스타일링 가능
const Button = styled.button`
background: ${props => props.primary ? 'black' : 'gray'};
`;
단점
- 런타임 비용 있음
- 대규모 프로젝트에서는 번들 사이즈 증가 가능
Tailwind CSS (유틸리티 클래스 방식) - 설치 필요
요즘 가장 많이 쓰이는 방식 중 하나. Tailwind가 사실상 SCSS 변수 역할을 디자인 시스템 단위로 대체함.
예시
function Button() {
return (
<button className="bg-black text-white px-5 py-3 rounded-md hover:bg-gray-700">
Click
</button>
);
}
장점
- 빠른개발
- 클래스 충돌 없음
- 반응형, hover 매우 편함
단점
CSS 자체가 강해짐
- CSS 변수 (--var)
- nesting 지원
- clamp()
- container query
굳이 SCSS 안써도 되는 경우 많음.
조건부 클래스 적용 (실무 필수) - 설치 필요
보통 clsx 또는 classnames 라이브러리 사용
npm install clsx
import clsx from 'clsx';
function Button({ active }) {
return (
<button className={clsx('btn', active && 'active')}>
Click
</button>
);
}
SCSS / SASS 사용
CSS Modules + SCSS 조합은 지금도 실무에서 꽤 안정적인 선택
$primary: black;
.button {
background: $primary;
&:hover {
background: gray;
}
}
장점
CSS Modules 에서 SCSS 사용하려면 SASS 설치 필요.
npm install sass
그 다음 아래와 같이 선언하여 사용.
Button.module.scss
실무 트렌드 요약 (2026 기준)
- 스타트업 / 빠른 개발 → Tailwind
- 기업형 협업 프로젝트 → CSS Modules
- 디자인 시스템 강한 팀 → styled-components
- Next.js 프로젝트 → CSS Modules + Tailwind 혼용
추천 조합
✔ 안정성 중요 → CSS Modules + SCSS
✔ 빠른 생산성 → Tailwind
✔ 디자인 시스템 강한 앱 → styled-components
