styled-components란?

소개

styled-components는 React 애플리케이션에서 스타일을 작성하기 위한 CSS-in-JS 라이브러리입니다. 컴포넌트 기반으로 스타일을 정의하고 관리할 수 있으며, JavaScript 또는 TypeScript를 사용하여 스타일을 동적으로 생성할 수 있습니다. 이번 포스트에서는 styled-components의 주요 기능과 사용법에 대해 소개하고, 실제 예시를 통해 styled-components를 활용하는 방법을 알아보겠습니다.

설치

styled-components를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

이전 버전 설치 이슈 때문에 최신 버전을 설치하는것이 안전합니다.

npm install styled-components@latest

기본 사용법

styled-components를 사용하여 스타일이 적용된 컴포넌트를 생성하는 기본적인 방법은 다음과 같습니다:

import styled from 'styled-components';

const Button = styled.button`
  padding: 8px 16px;
  font-size: 16px;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #ddd;
  }
`;

// 컴포넌트 사용 예시
const App = () => {
  return <Button>Click Me</Button>;
};

Props 활용

styled-components는 Props를 활용하여 동적으로 스타일을 설정할 수 있습니다. 예를 들어, 컴포넌트의 Props에 따라 배경색을 동적으로 변경할 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  padding: 8px 16px;
  font-size: 16px;
  background-color: ${props => props.primary ? '#f00' : '#0f0'};
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

// 컴포넌트 사용 예시
const App = () => {
  return (
    <div>
      <Button>Default</Button>
      <Button primary>Primary</Button>
    </div>
  );
};

Global 스타일

styled-components를 사용하면 전역 스타일을 설정할 수도 있습니다. createGlobalStyle 함수를 사용하여 전역 스타일을 생성하고, 해당 컴포넌트를 최상위 컴포넌트에 추가합니다.

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

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

const App = () => {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 컴포넌트들 */}
    </>
  );
};

결론

이번 포스트에서는 styled-components라는 React에서 스타일을 위한 CSS-in-JS 라이브러리에 대해 소개하였습니다. styled-components는 컴포넌트 기반의 스타일링과 동적 스타일링을 간편하게 처리할 수 있는 강력한 도구입니다. styled-components의 공식 문서를 참고하여 더 많은 기능을 알아보시기 바랍니다.
https://styled-components.com/