Styled-components 기초

Styled-components는 React 애플리케이션에서 널리 사용되는 CSS-in-JS 라이브러리입니다.

이 접근 방식은 JavaScript 파일 내에서 직접 CSS를 작성할 수 있게 해주며, 컴포넌트 기반 개발 방식과 잘 어울립니다.

CSS-in-JS와 Styled-components 소개

CSS-in-JS는 JavaScript를 사용하여 스타일을 정의하는 기법입니다.

Styled-components는 이 패러다임을 구현한 인기 있는 라이브러리로, 다음과 같은 장점을 제공합니다.

컴포넌트 기반 스타일링 : 각 컴포넌트에 대한 스타일을 해당 컴포넌트와 같은 파일에 정의할 수 있습니다.
동적 스타일링 : props를 기반으로 스타일을 쉽게 변경할 수 있습니다.
자동 벤더 프리픽스 : 크로스 브라우저 호환성을 위한 벤더 프리픽스를 자동으로 추가합니다.
고유한 클래스 이름 : 자동으로 고유한 클래스 이름을 생성하여 스타일 충돌을 방지합니다.

Styled-components 설치

프로젝트에 Styled-components를 추가하려면 다음 명령어를 실행합니다.

npm install styled-components

기본 사용법

Styled-components를 사용하여 스타일링된 컴포넌트를 만드는 기본적인 방법은 다음과 같습니다.

import styled from 'styled-components';
 
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
 
  &:hover {
    background-color: darkblue;
  }
`;
 
function App() {
  return <Button>Click me</Button>;
}

이 예제에서 Button은 스타일이 적용된 button 요소를 렌더링하는 React 컴포넌트입니다.

Props를 이용한 동적 스타일링

Styled-components의 강력한 기능 중 하나는 props를 기반으로 스타일을 동적으로 변경할 수 있다는 점입니다.

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;
 
function App() {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
}

이 예제에서 primary prop의 값에 따라 버튼의 배경색이 변경됩니다.

전역 스타일 적용

Styled-components를 사용하여 전역 스타일을 적용할 수 있습니다.

import { createGlobalStyle } from 'styled-components';
 
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
 
  * {
    box-sizing: border-box;
  }
`;
 
function App() {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 애플리케이션 컴포넌트들 */}
    </>
  );
}

GlobalStyle 컴포넌트를 애플리케이션의 최상위 레벨에 포함시켜 전역 스타일을 적용할 수 있습니다.

테마 사용

Styled-components는 테마 기능을 제공하여 전체 애플리케이션의 스타일을 일관되게 관리할 수 있게 해줍니다.

import { ThemeProvider } from 'styled-components';
 
const theme = {
  colors: {
    primary: 'blue',
    secondary: 'green',
  },
  fonts: {
    main: 'Arial, sans-serif',
  },
};
 
const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  font-family: ${props => props.theme.fonts.main};
  color: white;
  padding: 10px 20px;
  border: none;
`;
 
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Themed Button</Button>
    </ThemeProvider>
  );
}

ThemeProvider를 사용하여 테마 객체를 하위 컴포넌트에 전달할 수 있습니다.

기존 컴포넌트 스타일링

Styled-components를 사용하여 기존의 React 컴포넌트에도 스타일을 적용할 수 있습니다.

const StyledLink = styled(Link)`
  color: blue;
  text-decoration: none;
 
  &:hover {
    text-decoration: underline;
  }
`;
 
function Navigation() {
  return <StyledLink to="/">Home</StyledLink>;
}

이 예제에서는 React Router의 Link 컴포넌트에 스타일을 적용했습니다.

고급 기능

attr 메소드 : 컴포넌트에 추가 props를 전달할 수 있습니다.

const Input = styled.input.attrs(props => ({
  type: 'text',
  size: props.size || '1em',
}))`
  border: 2px solid palevioletred;
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

CSS 헬퍼 함수 : 복잡한 CSS를 재사용 가능한 방식으로 정의할 수 있습니다.

import { css } from 'styled-components';
 
const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;
 
const Container = styled.div`
  ${flexCenter}
  background-color: gray;
`;

keyframes : 애니메이션을 정의할 수 있습니다.

import { keyframes } from 'styled-components';
 
const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;
 
const RotatingDiv = styled.div`
  animation: ${rotate} 2s linear infinite;
`;

Styled-components는 React 애플리케이션에서 스타일을 관리하는 강력하고 유연한 방법을 제공합니다.

컴포넌트 기반 아키텍처와 잘 어울리며, 동적 스타일링, 테마 지원, 그리고 전역 스타일 관리 등 다양한 기능을 제공합니다.

하지만 CSS-in-JS 접근 방식이 모든 프로젝트에 적합한 것은 아닙니다.

기존 CSS에 익숙한 팀원들에게는 학습 곡선이 있을 수 있으며, 런타임에 스타일을 생성하므로 약간의 성능 오버헤드가 있을 수 있습니다.

프로젝트의 요구사항과 팀의 선호도를 고려하여 Styled-components 사용 여부를 결정해야 합니다.

Styled-components를 효과적으로 사용하면 컴포넌트의 로직과 스타일을 긴밀하게 결합하여 더 모듈화되고 유지보수가 쉬운 코드를 작성할 수 있습니다.

또한 JavaScript의 모든 기능을 활용하여 동적이고 유연한 스타일링 시스템을 구축할 수 있습니다.

이전으로 다음으로