React에는 다양한 스타일링 방식이 존재한다.
Vanilla CSS → Inline Styles → CSS Modules까지 모두 React에서 널리 쓰이는 방식이지만 이번에는 완전히 다른 철학을 가진 스타일링 방식인 Styled Components를 살펴본다.
Styled Components는 CSS 파일도, inline 스타일도 아닌 스타일이 적용된 React 컴포넌트를 직접 생성하는 방식이다. 즉, 스타일과 컴포넌트를 하나의 단위로 묶어 UI를 구성하게 해준다.
1. Styled Components란?
Styled Components는 서드 파티 라이브러리로 JS 파일 안에서 스타일을 작성하고 그 스타일이 적용된 커스텀 컴포넌트를 만들어 쓸 수 있는 방식이다.
설치
npm install styled-components설치 후 프로젝트를 새로 실행해야 할 수도 있다.
2. 기본 사용법 : styled.div 생성하기
styled-components를 사용하려면 먼저 styled를 import한다.
import styled from 'styled-components';그리고 다음처럼 styled.div 형태로 새로운 컴포넌트를 만들 수 있다.
const ControlContainer = styled.div`
margin-bottom: 1rem;
display: flex;
flex-direction: column;
`;여기서 중요한 점,
- backtick(`) 안에는 순수한 CSS 코드를 그대로 작성한다.
- PascalCase로 작성.
- 멀티 라인 작성 가능.
결과적으로 스타일이 적용된 div 컴포넌트가 만들어진다.
이제 기존 div 대신 아래와 같이 사용한다.
<ControlContainer>
...
</ControlContainer>3. Styled Components가 동작하는 방식
Styled Components는 내부적으로,
1. 우리가 작성한 CSS를 빌드 시 고유한 클래스명으로 변환한다.
2. 이 고유한 클래스를 <head>에 삽입한다.
3. 해당 클래스를 우리가 만든 컴포넌트에 자동으로 붙인다
즉, CSS Modules처럼 스코프가 보장되며, 우리는 className을 일일이 관리할 필요 없이 스타일이 적용된 컴포넌트만 사용하면 된다.
4. Styled Components로 기본 요소(label, input)도 재정의하기
Styled Components는 div 뿐만 아니라 모든 HTML 태그를 대상으로 만들 수 있다.
예 : label 스타일링
const Label = styled.label`
font-weight: bold;
margin: 0.5rem 0;
color: #333;
`;컴포넌트에서 사용할 때는 아래와 같이 사용한다.
<Label>Email</Label>예 : input 스타일링
const Input = styled.input`
padding: 0.5rem;
border-radius: 6px;
border: 1px solid #ccc;
`;컴포넌트에서 사용할 때는 아래와 같이 사용한다.
<Input type="email" onChange={...} />5. ⭐️ Styled Components만의 핵심 특징 : props 자동 전달
Styled Components는 내부에서 기본 HTML 요소(label, input 등)을 생성한다.
그리고 그 요소에게 우리가 전달한 props를 그대로 forwarding한다.
예 :
<Input
type="password"
onChange={passwordChangeHandler}
className={!passwordIsValid ? 'invalid' : ''}
/>이 모든 props는 내부의 실제 <input>에게 그대로 전달된다.
즉, 이벤트 리스너(onChange, onBlur), HTML 속성(type, value), className, style, aria-* 전부 문제 없이 동작한다.
이 덕분에 styled input이냐, 기본 input이냐의 차이만 있을 뿐 나머지 로직은 그대로 유지된다.
6. Styled Components의 장단점
장점
1) 컴포넌트 단위 스타일 관리
- 스타일과 구조가 하나의 파일, 한 덩어리로 묶여 유지보수가 쉬움.
2) 스코프 자동 보장
- 클래스 이름은 자동으로 유니크하게 변환되므로 충돌 없음.
3) 순수 CSS 그대로 사용
- CSS 문법 변형 없이 그대로 사용 가능.
4) 조건부 스타일링 / props 기반 스타일링 강력
(이 부분은 다음 강의에서 더 깊이 다룸!)
5) className 안 써도 됨
- "이 컴포넌트는 이 스타일이다"라는 개념이 명확해짐.
단점
1) 서트 파티 라이브러리 설치 필요
- 번들 크기가 증가할 수 있음.
2) JS 안에 스타일이 들어오므로 파일이 길어질 수 있음
- 취향에 따라 가독성이 떨어진다고 느끼는 사람도 있음.
3) 모든 컴포넌트가 styled 컴포넌트가 되면 요소 구조 파악이 어려울 수 있음
- 개발자 도구에서
<label class="sc-hvigdm eEJnQf"></label>같은 형태로 보임.
