[React] Styled Components 사용하기

 

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

 

styled-component 는 CSS-in-JS 방식을 사용하는 라이브러리입니다.

말 그대로 CSS 코드를 자바스크립트 안에 작성할 수 있게 해줍니다. 그리고 중요한 건, 작성한 스타일이 해당 컴포넌트에만 적용된다는 점입니다.

즉, 스타일이 자동으로 스코프(scope)되어 다른 컴포넌트와 충돌하지 않도록 해줍니다.

styled-component 설치

npm install styled-components

사용 방법 예시

// Button.jsx
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #4caf50;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

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

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

export default Button;

이렇게 하면 StyledButton은 내부적으로 고유한 클래스명을 생성하고, 이 스타일은 다른 컴포넌트와 절대 충돌하지 않습니다. 마치 컴포넌트 하나하나가 스타일 영역을 가지는 것처럼 작동합니다.

props로 동적 스타일 처리하기

styled-components는 props를 받아서 CSS 값을 동적으로 지정할 수 있습니다.

const Input = styled.input`
  background-color: ${({ invalid }) => $invalid ? "#fed2d2" : "#d1d5db"};
  color: ${({ invalid }) => $invalid ? "#ef4444" : "#374151"};
`

<Input $invalid={emailNotValid} />

이런 방식으로 유효성 검증에 따라 스타일을 다르게 보여줄 수 있어 사용자 경험을 향상시킬 수 있습니다.

💡$ 접두사는 왜 쓰는 걸까? styled-components는 $로 시작하는 props는 자동으로 필터링해서 DOM에 전달하지 않도록 처리해줍니다. $invalid는 오직 스타일링에서만 사용되고, 실제 HTML 속성에는 포함되지 않기 때문에 불필요한 경고 없이 안전하게 스타일을 제어할 수 있습니다.

중첩 스타일, @media, hover 등의 사용법

styled-components는 일반 CSS 문법을 거의 그대로 사용할 수 있기 때문에, 다음과 같은 고급 기능들도 자연스럽게 적용할 수 있습니다.

✅ 중첩 선택자 (&)

const Header = styled.header`
  padding: 2rem;
  background-color: #f0f0f0;

  & h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  & p {
    color: #555;
  }
`

&는 해당 styled 컴포넌트 자신을 가리킵니다. 위 예제는 Header 안의 h1과 p에 각각 스타일을 주는 방법입니다.

✅ 미디어 쿼리 (@media)

const Header = styled.header`
  margin-bottom: 2rem;

  @media (min-width: 768px) {
    margin-bottom: 4rem;
  }
`

스크린 크기에 따라 스타일을 다르게 적용할 수 있습니다. 일반 CSS에서 하던 방식 그대로 작성하면 됩니다.

✅ Pseudo 선택자 (예: :hover, :focus)

const Button = styled.button`
  background-color: #4caf50;
  color: white;

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

hover 상태도 마찬가지로 &:hover와 같이 작성하면 됩니다. &는 항상 해당 요소 자신을 의미합니다. 빈칸 없이 이어서 써야 pseudo 선택자로 인식됩니다.

장점

• 스타일 충돌 걱정 X: 자동으로 고유 클래스 생성
• props로 동적 스타일 처리 가능
• 컴포넌트 기반의 스타일링
• 기존 CSS 문법 대부분 사용 가능
• 구조화된 스타일 관리가 쉬움

주의할 점

• 런타임에서 CSS를 처리하므로, 매우 큰 프로젝트에서는 퍼포먼스 이슈 가능성 있음
• CSS가 JS 내부에 있어 초반엔 낯설 수 있음

 

---

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!