# styled-components

## 개요

**styled-components**는 자바스크립트 기반의 리액트(React) 애플리케이션에서 CSS를 보다 직관적이고 모듈화된 방식으로 작성할 수 있도록 도와주는 **CSS-in-JS 라이브러리**입니다. 이 라이브러리는 자바스크립트 템플릿 리터럴(template literals) 문법을 활용하여 컴포넌트 수준에서 스타일을 정의하며, CSS를 자바스크립트 파일 내에 직접 작성할 수 있게 해줍니다. 이를 통해 스타일과 컴포넌트 로직을 하나의 파일로 통합할 수 있어 유지보수성과 재사용성을 높입니다.

styled-components는 특히 리액트 생태계에서 널리 사용되며, 전역 스타일 충돌을 방지하고, 동적 스타일링(예: props 기반 스타일 변경), 테마 지원, 서버 사이드 렌더링(SSR) 호환성 등을 제공합니다.

---

## 주요 특징

### 1. **컴포넌트 기반 스타일링**

styled-components는 HTML 요소나 기존 리액트 컴포넌트를 기반으로 새로운 스타일링된 컴포넌트를 생성합니다. 예를 들어, `<button>` 요소를 스타일링하여 `PrimaryButton`이라는 새로운 컴포넌트를 만들 수 있습니다.

```jsx
import styled from 'styled-components';

const PrimaryButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

function App() {
  return <PrimaryButton>클릭하세요</PrimaryButton>;
}
```

이 방식은 스타일과 마크업이 분리되지 않고, 하나의 논리적 단위로 관리된다는 점에서 유지보수에 유리합니다.

---

### 2. **Props 기반 동적 스타일링**

컴포넌트에 전달된 props를 활용해 스타일을 동적으로 변경할 수 있습니다. 이는 조건부 스타일링(예: 버튼의 활성화 상태, 색상 테마 등)에 매우 유용합니다.

```jsx
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
`;

function App() {
  return (
    <>
      <Button primary>기본 버튼</Button>
      <Button>보조 버튼</Button>
    </>
  );
}
```

---

### 3. **자동 CSS 클래스 생성 및 스코프 격리**

styled-components는 각 스타일링된 컴포넌트에 대해 고유한 해시 기반 클래스 이름을 자동으로 생성합니다. 이로 인해 **스타일 충돌이 발생하지 않으며**, CSS의 전역 스코프 문제를 해결할 수 있습니다.

예: 렌더링된 HTML
```html
<button class="sc-bdnylx jvGzXa">클릭하세요</button>
```

---

### 4. **테마 지원 (ThemeProvider)**

`ThemeProvider`를 사용하면 애플리케이션 전역에서 사용할 테마(예: 색상, 폰트, 간격 등)를 정의하고, 모든 styled 컴포넌트에서 접근할 수 있습니다.

```jsx
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d'
  },
  spacing: '16px'
};

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  padding: ${props => props.theme.spacing};
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>테마 적용 버튼</Button>
    </ThemeProvider>
  );
}
```

---

### 5. **서버 사이드 렌더링(SSR) 지원**

styled-components는 Next.js, Gatsby 등의 SSR 프레임워크와 잘 통합되며, `ServerStyleSheet`를 통해 서버에서 렌더링된 스타일을 클라이언트에 전달할 수 있습니다. 이를 통해 초기 로딩 시 FOUC(Flash of Unstyled Content)를 방지할 수 있습니다.

---

## 설치 및 설정

styled-components는 npm 또는 yarn을 통해 설치할 수 있습니다.

```bash
npm install styled-components
# 또는
yarn add styled-components
```

TypeScript를 사용하는 경우, 타입 정의는 별도 설치가 필요 없습니다. styled-components v5 이상부터는 내장 타입을 제공합니다.

---

## 주의사항 및 한계

- **번들 크기 증가**: CSS-in-JS 방식은 런타임에 스타일을 생성하므로, 번들 크기가 순수 CSS보다 커질 수 있습니다.
- **학습 곡선**: 기존 CSS 개발자에게는 자바스크립트 내에서 스타일을 작성하는 방식이 익숙하지 않을 수 있습니다.
- **디버깅 어려움**: 자동 생성된 클래스 이름은 가독성이 낮아 디버깅 시 다소 불편할 수 있습니다. (개발 모드에서는 더 친화적인 이름을 제공)

---

## 관련 도구 및 생태계

- **@types/styled-components**: TypeScript 사용 시 타입 지원
- **babel-plugin-styled-components**: SSR 최적화 및 디버깅 향상
- **styled-system**: 반응형 디자인 및 스타일 유틸리티 제공
- **polished**: 색상 조작, 믹스인 등 스타일링 보조 함수 제공

---

## 참고 자료

- [styled-components 공식 문서](https://styled-components.com)
- [GitHub 저장소](https://github.com/styled-components/styled-components)
- [CSS-in-JS 논의 (React 공식 문서)](https://reactjs.org/docs/faq-styling.html)

styled-components는 현대 웹 개발에서 컴포넌트 기반 아키텍처와 잘 어울리는 스타일링 솔루션으로, 특히 리액트 기반 프로젝트에서 강력한 생산성과 유연성을 제공합니다.