styled-component란? 스타일 컴포넌트 개념부터 실전까지

styled-components란?

리액트에서 사용하는 CSS-in-JS 라이브러리다.

간단히 말하면, CSS와 자바스크립트를 섞어서 스타일을 작성할 수 있게 해주는 도구이다.

---

사용 이유

1. 컴포넌트 기반 : 각 컴포넌트에 스타일을 붙여서 관리하기 편하다.
2. CSS 중복 방지 : 클래스 이름 충돌 문제를 자동으로 해결한다.
3. 동적 스타일링 : 컴포넌트의 props를 활용해 조건에 따라 스타일을 동적으로 변경할 수 있다.

---

styled-components 사용 예제

1. 기본 사용법

import styled from 'styled-components';

// 버튼 스타일 정의
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

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

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

export default App;

• styled.button을 사용해서 스타일이 적용된 버튼을 만들었다.
• css 코드를 문자열로 작성했는데, 이 스타일은 해당 컴포넌트에만 적용된다.
• 결과 : Button컴포넌트에만 파란색 배경과 하얀색 글자가 적용 된다.

---

2. 동적 스타일링

props를 이용해 스타일을 동적으로 변경할 수 있다.

import styled from 'styled-components';

// props에 따라 색상이 달라지는 버튼
const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: ${(props) => (props.primary ? "darkblue" : "darkgray")};
  }
`;

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

export default App;

 

• primary라는 props를 통해 생상을 조건부로 설정
• primary가 true면 파란색, 아니면 회색

---

 

3. 스타일 확장

기존의 스타일을 재사용하고, 새로운 스타일을 추가

import styled from 'styled-components';

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

const LargeButton = styled(Button)`
  font-size: 20px;
  padding: 15px 30px;
`;

function App() {
  return <LargeButton>Large Button</LargeButton>;
}

export default App;

 

• Button의 스타일을 그대로 가져오고, 추가로 변경
• 결과 : LargeButton은 기존 버튼보다 더 크고, 패딩도 넉넉하다.

---

4. 애니메이션 추가

styled-components는 CSS애니메이션도 쉽게 작성할 수 있다.

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

// 애니메이션 정의
const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

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

function App() {
  return <AnimatedDiv>Hello, World!</AnimatedDiv>;
}

export default App;

 

---

styled-components의 장점

1. CSS 충돌 없음 : 각 컴포넌트는 고유한 클래스 이름을 자동으로 생성
2. 동적 스타일링 : props로 스타일을 쉽게 변경 가능
3. 컴포넌트와 스타일 결합 : HTML, CSS, JS가 한 곳에 있어 가독성이 좋다.
4. 유지보수 편리 : 컴포넌트 단위로 스타일 관리