styled-components 사용법

styled-components는 CSS를 JavaScript 코드 내에서 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. 컴포넌트 단위로 스타일을 관리할 수 있어, 스타일을 코드와 함께 유지하고 모듈화하기 좋습니다. 리액트에서 많이 사용되며, CSS 클래스 이름 충돌을 피할 수 있습니다.

styled-components 기본 사용법

1. 설치하기:

npm install styled-components

 

2. 기본 사용법: styled-components를 사용하여 버튼 스타일을 정의하고, 컴포넌트로 불러와 사용할 수 있습니다.

import React from 'react';
import styled from 'styled-components';

// 스타일이 적용된 버튼 컴포넌트를 생성
const StyledButton = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #45a049;
  }
`;

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

export default App;

위 코드에서는 StyledButton이라는 이름의 styled-component를 만들었고, styled.button을 통해 버튼의 스타일을 정의했습니다. 컴포넌트처럼 사용할 수 있으며, 버튼을 클릭하거나 마우스를 올리면 스타일이 적용됩니다.

 

3. Props를 사용한 동적 스타일링: props를 사용하여 스타일을 동적으로 변경할 수 있습니다.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? "#4CAF50" : "#555555"};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: ${props => props.primary ? "#45a049" : "#333333"};
  }
`;

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

primary prop을 전달받아 버튼의 색상이 다르게 설정됩니다. primary가 있을 때와 없을 때 버튼 색상이 달라지므로, 스타일을 쉽게 변경할 수 있습니다.

 

4. Global Styles (전역 스타일 설정): createGlobalStyle을 사용하여 애플리케이션 전체에 전역 스타일을 설정할 수 있습니다.

import { createGlobalStyle } from 'styled-components';

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

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

export default App;

위 코드에서 GlobalStyle을 만들어 컴포넌트처럼 <GlobalStyle />로 사용하면, 애플리케이션에 전역 스타일을 적용할 수 있습니다.

 

5. 컴포넌트 스타일 확장: 기존 styled-component를 확장하여 새로운 컴포넌트를 만들 수 있습니다.

const PrimaryButton = styled.button`
  background-color: #4CAF50;
  color: white;
`;

const SecondaryButton = styled(PrimaryButton)`
  background-color: #555555;
`;

function App() {
  return (
    <div>
      <PrimaryButton>Primary</PrimaryButton>
      <SecondaryButton>Secondary</SecondaryButton>
    </div>
  );
}

SecondaryButton은 PrimaryButton의 스타일을 상속받고, 배경색만 변경됩니다. 스타일을 재사용할 때 유용하게 사용할 수 있습니다.

 

6. 애니메이션: styled-components로 애니메이션을 추가할 수도 있습니다.

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

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

const AnimatedDiv = styled.div`
  animation: ${fadeIn} 1s ease-in;
  padding: 20px;
  background-color: lightblue;
`;

function App() {
  return (
    <div>
      <AnimatedDiv>Animated Content</AnimatedDiv>
    </div>
  );
}

keyframes를 사용하여 애니메이션을 정의하고, animation 속성으로 적용합니다.

요약

• styled-components는 JavaScript에서 CSS를 작성할 수 있게 해주어 컴포넌트 단위의 스타일링이 가능합니다.
• 동적 스타일링: props를 활용해 동적으로 스타일을 변경할 수 있습니다.
• 전역 스타일: createGlobalStyle로 전체 애플리케이션에 전역 스타일을 설정할 수 있습니다.
• 스타일 확장: 스타일 확장 기능으로 기본 컴포넌트를 확장할 수 있습니다.
• 애니메이션 추가: keyframes를 사용해 애니메이션을 정의하고 쉽게 적용할 수 있습니다.