styled-components

핵심 개념

Tagged Template Literal

ES6의 템플릿 리터럴을 활용해 styled.div`...` 형태로 스타일을 정의하는 문법입니다. 백틱 안에 일반 CSS 문법을 그대로 작성할 수 있습니다.

Automatic Critical CSS

페이지에 렌더링된 컴포넌트의 스타일만 자동으로 추출해 DOM에 주입합니다. 사용하지 않는 스타일은 번들에 포함되지 않습니다.

Dynamic Styling

컴포넌트의 props나 theme 값을 기반으로 스타일을 조건부로 변경할 수 있습니다. JavaScript 표현식을 사용해 런타임에 스타일을 계산합니다.

ThemeProvider

애플리케이션 전체에 공통 디자인 토큰(색상, 폰트 등)을 제공하는 Context 기반 컴포넌트입니다. 하위 모든 styled 컴포넌트에서 theme 객체로 접근할 수 있습니다.

Unique Class Name

각 styled 컴포넌트마다 고유한 해시 기반 클래스명이 자동 생성되어 스타일 충돌을 방지합니다.

기본 사용 예시

props.primary 값에 따라 배경색이 달라지는 버튼 컴포넌트를 정의하고 사용하는 예시입니다. CSS 파일 없이 컴포넌트 파일 안에서 모든 스타일을 처리합니다.

import styled from 'styled-components';

// 스타일이 적용된 컴포넌트 생성
const Button = styled.button`
  background: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

// 사용
function App() {
  return (
    <div>
      <Button>기본 버튼</Button>
      <Button primary>주요 버튼</Button>
    </div>
  );
}