[React] Styled-components: 컴포넌트 기반 스타일링

Styled-components

: JS 파일 내에서 CSS를 작성하고, React 또는 JavaScript 프레임워크와 통합할 수 있도록 해주는 CSS-in-JS 라이브러리

• 컴포넌트 기반 개발에 적합하며, 스타일을 컴포넌트 단위로 캡슐화하여 관리할 수 있다.

 

장점

1. CSS와 JavaScript의 통합: CSS를 JavaScript 파일 내에 작성하여 스타일과 로직을 한 곳에서 관리할 수 있다.
2. Scoped 스타일: 스타일이 해당 컴포넌트에만 적용되도록 자동으로 범위가 설정되어 클래스 이름 충돌이 발생하지 않는다.
3. 동적 스타일링: props나 상태(state)에 따라 동적으로 스타일을 변경할 수 있다.
4. 재사용성: 스타일이 적용된 컴포넌트를 다른 곳에서 재사용할 수 있으며, 상속(Extending Styles)을 통해 쉽게 확장 가능하다.

 

 

단점

1. 런타임 성능: 스타일을 런타임에 생성하므로 대규모 프로젝트에서는 성능 최적화가 필요하다.
2. 빌드 크기 증가: 작은 프로젝트에서는 라이브러리 추가로 인해 빌드 크기가 증가할 수 있다.
3. CSS 파일 분리 불가: CSS가 JavaScript 파일 내에 작성되므로 스타일만 따로 관리하기 어렵다.

 

 

사용하는 경우

1. 컴포넌트 기반 개발: React, Vue 같은 프레임워크를 사용할 때
2. 테마 관리: 다크 모드 또는 사용자 정의 테마가 필요한 경우
3. 스타일 스코프 관리: 클래스 충돌 없이 컴포넌트별로 스타일을 관리하고자 할 때

 

---

 

설치

npm i styled-components

 

 

 

사용법

styled 함수로 스타일을 작성한다.

styled.태그`
   CSS 코드
`;

import styled from 'styled-components';

const Button = styled.button`
  background-color: palevioletred;
  color: white;
  padding: 10px 20px;
  cursor: pointer;

  &:hover {
    background-color: darkviolet;
  }
`;

function App() {
  return <Button>Click me</Button>;
}

 

 

 

 

Styled-components의 핵심 기능

1. Extending Styles (스타일 확장)

• 기존 컴포넌트의 스타일을 상속받아 새로운 컴포넌트를 만들 수 있다.

const Button = styled.button`
  background: palevioletred;
  color: white;
`;

// Button 스타일 확장
const LargeButton = styled(Button)`
  font-size: 20px;
  padding: 20px;
`;

 

 

 

2. Props를 활용한 동적 스타일링

• props를 사용하여 동적으로 스타일을 변경할 수 있다.
• props는 템플릿 리터럴 내부에서 화살표 함수 형태로 사용할 수 있다.

const Button = styled.button`
  background: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
`;

function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </>
  );
}

 

 

 

3. Global Styles (전역 스타일 적용)

• createGlobalStyle API를 사용하여 전역 스타일을 정의할 수 있다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>전역 스타일이 적용된 페이지</div>
    </>
  );
}

 

 

 

4. Theming (테마 설정)

• ThemeProvider를 사용하여 다크 모드와 같은 테마를 쉽게 구현할 수 있다.

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'palevioletred',
  secondaryColor: 'gray',
};

const Button = styled.button`
  background: ${(props) => props.theme.primaryColor};
  color: white;
`;

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

 

 

 

5. Keyframes (애니메이션 적용)

• keyframes를 사용하여 CSS 애니메이션를 구현할 수 있다.

import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

const AnimatedDiv = styled.div`
  animation: ${fadeIn} 2s linear;
`;

function App() {
  return <AnimatedDiv>애니메이션 적용</AnimatedDiv>;
}

 

 

---

 

styled-components: Basics

 

styled-components: Documentation

 

GitHub - styled-components/styled-components: Visual primitives for the component age. Use the best bits of ES6 and CSS to style