styled-components란?

리액트 사용할때 그냥 생각없이 사용했었는데, 이번에 열심히 그 개념과 내용들을 찾아보고 정리를 해둔다.

 

🎨 styled-components란?

styled-components는

CSS를 JavaScript 안에 작성할 수 있게 해주는 라이브러리

즉, CSS 파일 따로 안 만들고,
컴포넌트 안에서 바로 스타일을 적용할 수 있다.

✅ 특징:

• 컴포넌트 단위로 스타일을 묶을 수 있어 → 코드 깔끔
• 클래스 이름 충돌 걱정 없음 → 자동으로 고유 클래스 생성
• props로 스타일 제어 가능 → 동적인 스타일 만들기 쉬움

---

🛠️ 설치 방법

Next.js 프로젝트에 styled-components 설치하려면:

yarn add styled-components

(이번 개인 실습용 프로젝트는 그냥 yarn으로 프로젝트를 설치했다.)

 

(또는 npm이라면 npm install styled-components)

그리고 추가로 SSR(서버사이드 렌더링) 최적화를 위해 babel-plugin-styled-components도 설치하는 걸 추천:

yarn add -D babel-plugin-styled-components

 

(개발용(-D)로 설치)

그 다음 .babelrc 파일을 루트에 만들어서 이렇게 추가해:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

✅ 여기까지 하면 준비 완료!

---

✨ 사용 예시

기존에 CSS 쓰던 방식

export default function Home() {
  return (
    <div className="title">
      Hello Next.js!
    </div>
  );
}

/* styles.css */
.title {
  font-size: 24px;
  color: blue;
}

---

styled-components로 쓰면?

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 24px;
  color: blue;
`;

export default function Home() {
  return (
    <div>
      <Title>Hello Next.js with styled-components!</Title>
    </div>
  );
}

✅ 정리:

• styled.h1 처럼 HTML 태그를 감싸서
• CSS 코드를 JavaScript 코드 안에 바로 작성하는 거야!

---

📦 다양한 styled-components 사용법

✅ 1. 태그 변경

const Button = styled.button`
  background: green;
  color: white;
  padding: 10px;
`;

 

✅ 2. props로 스타일 다르게 주기

const Button = styled.button`
  background: ${props => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px;
`;

export default function Home() {
  return (
    <div>
      <Button>기본 버튼</Button>
      <Button primary>프라이머리 버튼</Button>
    </div>
  );
}

• primary props를 줄 때만 파란색 배경!

---

📢 styled-components 왜 많이 쓰냐?

이유	설명
컴포넌트 단위 스타일 관리	기능별로 스타일 분리 가능
클래스 충돌 없음	고유한 클래스명 자동 생성
동적 스타일링	props로 조건부 스타일링 가능
SSR 최적화 가능	Next.js 같은 서버사이드 렌더링에도 대응 가능

 

🎯 요약

질문	답변
styled-components란?	JavaScript 안에서 CSS를 작성하는 방법
설치는?	yarn add styled-components
어떻게 써?	styled.h1``... 식으로 작성
장점은?	깔끔한 코드, 컴포넌트 스타일 관리, 충돌 방지