Styled-components란?

원도훈·2024년 10월 23일

1. Styled-Components의 개념과 장단점

Styled-Components는 React 기반의 스타일링 라이브러리로, "CSS-in-JS" 패러다임을 채택하여 JavaScript 코드 안에서 CSS를 작성할 수 있도록 도와줍니다. 이를 통해 컴포넌트와 스타일이 결합되어 유지보수가 쉬워지고, 개발자가 스타일과 컴포넌트를 보다 직관적으로 관리할 수 있습니다.

장점
- Scoped CSS: 스타일이 컴포넌트 단위로 적용되어 다른 컴포넌트와 충돌하지 않으며, 클래스 이름 충돌 문제를 자동으로 해결합니다.
- 동적 스타일링: props를 통해 스타일을 조건부로 변경할 수 있어 재사용성과 유연성이 뛰어납니다.
- 가독성: JavaScript와 CSS가 한 파일에 공존하기 때문에 해당 컴포넌트의 스타일을 즉시 확인하고 수정할 수 있어 생산성이 높습니다.
단점
- 런타임 성능 문제: 모든 스타일이 JavaScript 런타임에서 생성되기 때문에, 컴포넌트가 많아지면 성능이 저하될 수 있습니다.
- 번들 크기 증가: Styled-Components 라이브러리를 추가하면 전체 번들 크기가 커질 수 있습니다.

2. CSS-in-JS의 개념

CSS-in-JS는 JavaScript 코드 내부에 CSS를 작성할 수 있는 패러다임입니다. 스타일을 독립적으로 관리하는 전통적인 방식과 달리, 컴포넌트별로 필요한 스타일을 해당 JavaScript 코드에서 직접 작성할 수 있습니다. 이 방식은 유지보수성, 재사용성, 그리고 스코프 문제를 해결하는 데 유용합니다.

3. CDD(Component-Driven Development)의 개념

CDD(Component-Driven Development)는 컴포넌트 중심으로 애플리케이션을 개발하는 방법론입니다. 컴포넌트 단위로 UI를 구성하면서, 각 컴포넌트의 독립성과 재사용성을 높이는 것이 목적입니다. Styled-Components는 이 CDD 방식과 잘 맞아, 스타일을 컴포넌트 내부에서 관리하고 분리할 수 있게 도와줍니다.

Styled-Components 사용 방법

1. Styled-Components 기본 사용법

Styled-Components를 사용하기 위해서는 패키지를 설치해야 합니다. 다음 명령어를 사용해 설치할 수 있습니다:

npm install styled-components

설치 후에는 styled-components를 import하여 사용할 수 있습니다. 아래 예시는 기본적인 사용법을 보여줍니다.

import styled from 'styled-components';

const Button = styled.button`
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background: #2980b9;
  }
`;

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

위의 예시에서는 Button이라는 컴포넌트를 생성하고 스타일을 지정합니다. 이 컴포넌트는 다른 곳에서도 재사용이 가능합니다.

2. 생성한 컴포넌트를 재사용하는 방법

Styled-Components로 만든 컴포넌트는 다른 컴포넌트 파일에서 import하여 재사용할 수 있습니다. 이를 통해 스타일 일관성을 유지하면서 여러 곳에서 쉽게 사용할 수 있습니다.

import Button from './Button';

function AnotherComponent() {
  return <Button>Another Button</Button>;
}

위와 같이 Button 컴포넌트를 다른 파일에서도 사용함으로써 코드의 재사용성과 유지보수성을 높일 수 있습니다.

3. 클래스명을 지정하지 않아도 되는 이유

Styled-Components는 컴포넌트에 고유한 클래스를 자동으로 생성하여 적용합니다. 이로 인해 개발자가 직접 클래스명을 지정할 필요가 없으며, 클래스명 충돌에 대한 걱정도 사라집니다. 고유한 해시 값이 스타일의 이름으로 자동 부여되어 같은 이름의 컴포넌트가 있어도 서로 다른 스타일로 안전하게 유지됩니다.

Styled-Components 활용 예제

1. props 사용하기

Styled-Components는 props를 통해 동적으로 스타일을 변경할 수 있습니다. 예를 들어 버튼의 색상을 props에 따라 다르게 설정할 수 있습니다.

const Button = styled.button`
  background: ${(props) => props.primary ? '#3498db' : '#e74c3c'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

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

위의 코드에서 primary라는 props를 사용하여 버튼의 배경색을 조건부로 지정할 수 있습니다. 이를 통해 더욱 유연한 컴포넌트 스타일링이 가능합니다.

2. GlobalStyle 전역 스타일 설정

createGlobalStyle을 사용하면 전역 스타일을 정의할 수 있습니다. 이는 기존의 CSS 파일에 전역 스타일을 작성하는 것과 유사하지만, 컴포넌트와 함께 관리할 수 있어 편리합니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: 'Arial, sans-serif';
    background-color: #f0f0f0;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>My App</div>
    </>
  );
}

위의 예시에서 GlobalStyle을 사용하여 전역 스타일을 정의하고 애플리케이션 전체에 적용합니다.

3. SCSS 문법을 사용할 수 있는 이유

Styled-Components는 템플릿 리터럴을 사용해 스타일을 정의하므로, SCSS의 중첩 규칙이나 변수 사용 등과 같은 편리한 기능들을 쉽게 구현할 수 있습니다. 이를 통해 CSS 작성 경험이 있는 개발자들이 Styled-Components에 빠르게 적응할 수 있게 해줍니다.

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  .child {
    color: #3498db;
    &:hover {
      color: #2980b9;
    }
  }
`;

위와 같이 SCSS와 유사한 문법으로 중첩 규칙을 사용하여 컴포넌트 내부 요소에 스타일을 적용할 수 있습니다.

Styled-Components는 컴포넌트 중심의 UI 개발에 매우 적합한 스타일링 도구입니다. CSS-in-JS 방식으로 컴포넌트와 스타일을 한 곳에서 관리할 수 있고, props를 통한 동적 스타일링, SCSS 문법의 활용 등 다양한 장점이 있습니다. 이러한 기능들을 잘 활용하여 보다 효율적이고 유지보수하기 쉬운 애플리케이션을 개발해보세요.