Vite 스타일링 가이드 ② - Styled-Components

지난 포스팅에 이어서 이번에는 Styled-Components를 사용해서 스타일링을 해보려 한다.

 

 

 

Styled-Components란?

• CSS-in-JS 라이브러리 중 하나로, JavaScript 코드 내에서 CSS를 작성할 수 있게 해 준다.
• 컴포넌트 단위로 스타일을 정의하고 관리할 수 있게 되어 스타일이 특정 컴포넌트에 종속성을 가지고 재사용성을 높여준다.

 

 

 

Styled-Components의 장점

• 컴포넌트 기반 스타일링: 개별 컴포넌트에 직접 스타일링을 하며 해당 컴포넌트의 로직과 스타일을 한 곳에서 관리할 수 있다. 코드의 가독성과 유지보수성을 크게 향상시킨다.
• 캡슐화된 스타일: 자동으로 고유한 클래스 이름을 생성하여 스타일 충돌을 막아준다. 여러 컴포넌트에서 동일한 클래스 이름을 사용해도 문제가 발생하지 않는다.
• 동적 스타일링: JavaScript 변수나 Props를 사용하여 조건부 스타일링을 쉽게 구현할 수 있다. 버튼이 공통이어도 Props 값에 따라 색상을 변경하거나 크기를 조절할 수 있다.
• 쉬운 유지보수: 컴포넌트가 삭제되면 해당 컴포넌트의 스타일도 함께 제거되기 때문에 사용하지 않는 CSS 코드가 남는 문제를 줄여준다.
• 서버 사이드 렌더링(SSR) 지원: 서버에서 스타일을 미리 적용해서 화면을 보여 주기 때문에 처음 화면이 뜰 때 깜빡이는 일이 없고, 검색 엔진에도 더 잘 노출된다.

 

 

Vite 프로젝트 생성

Vite 설치 방법(React 프로젝트 기준)

 

 

 

Styled-Components 설치 및 세팅

# 터미널에 명령어 입력
npm install styled-components
npm install --save-dev @types/styled-components     # TypeScript를 사용하는 경우

 

package.json

 "dependencies": {
    "@tailwindcss/vite": "^4.1.10",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router": "^7.6.2",
    "styled-components": "^6.1.19",           # 확인
  },

 

 

 

사용 방법

이전에 "React Router로 라우팅 마스터하기"에서 만들었던 프로젝트에 스타일링을 연습해 봤다.

 

Home.jsx

import styled from 'styled-components'

const HomeDiv = styled.div`
  font-size: 2rem;
  font-weight: 600;
  color: #e6bbdc;
  padding: 1rem 0rem;
`;

export default function Home() {
  return <HomeDiv>Hello, Dev World</HomeDiv>
}

 

실행 화면

실행 화면(Home)

 

 

 

Tailwind CSS vs Styled-Components 비교

특징	Tailwind CSS	Styled-Components
유형	유틸리티 우선(Utility-First) CSS 프레임워크	CSS-in-JS 라이브러리
스타일링 방식	HTML/JSX 마크업에 유틸리티 클래스 직접 적용	JavaScript 코드 내에서 컴포넌트 기반 CSS 작성
코드 예시	<div class="flex justify-center bg-blue-500">	const MyDiv = styled.div `background: blue`;
스타일 충돌	각 클래스가 단일 목적이므로 거의 없음	자동으로 고유한 클래스명 생성하여 완벽 방지
동적 스타일링	조건부 클래스 적용 ({ isLarge && 'test-lg' })	Props를 통한 JavaScript 로직
재사용성	유틸리티 클래스 조합, @apply 지시어	스타일링된 컴포넌트 자체를 재사용
가독성	유틸리티 클래스 수가 많아 길어질 수 있음	간결하고 의미론적인 컴포넌트 사용
CSS 지식 요구	유틸리티 클래스 이름 학습 필요	기존 CSS 문법 지식 활용
성능(런타임)	빌드 시 CSS 생성, 런타임 오버 헤드 거의 없음	JavaScript를 통한 CSS 주입으로 약간의 런타임 오버헤드 가능
번들 크기	사용하지 않는 CSS 제거	CSS가 JS 번들에 포함되어 증가 가능
장점	빠른 개발 속도, 일관된 디자인, 쉬운 반응형	높은 컴포넌트 응집도, 동적 스타일링, 쉬운 유지보수
단점	마크업 복잡성 증가, 초반 학습 필요	런타임 성능 오버헤드, 번들 크기 증가 가능
적합한 상황	빠른 프로토타이핑, 디자인 시스템이 명확한 프로젝트, 백오피스 UI	복잡한 UI, 재사용 가능한 컴포넌트 라이브러리 개발, 디자인 시스템과 로직이 밀접한 경우

 

 

 

혼합하여 사용해도 되나?

특정 상황에서는 매우 효과적인 전략이 될 수 있다. 예를 들면 빠른 프로토타이핑과 세부 컴포넌트 스타일링이 모두 필요한 프로젝트가 있다고 가정할 때, Tailwind CSS로 전체적인 레이아웃, 여백, 폰트 크기, 배경색 등 기본적인 스타일을 잡고, Styled-Components로 버튼, 카드, 모달 등 재사용성이 높고 복잡한 특정 컴포넌트의 스타일을 세밀하게 제어하면 된다.

 

혼합 사용의 장점

• 개발 생산성 향상: Tailwind로 빠른 UI 구축, Styled-Components로 복잡한 컴포넌트 관리할 수 있다.
• 유연한 스타일링: 단순한 스타일은 유틸리티로, 동적이고 복잡한 스타일은 CSS-in-JS로 처리하여 각 도구의 강점을 극대화한다.
• 코드의 가독성 및 유지보수성: 공통적인 유틸리티 클래스로 HTML/JSX가 너무 길어지는 것은 방지하고, 중요한 컴포넌트는 Styled-Components로 깔끔하게 캡슐화할 수 있다.

고려사항

• 명확한 팀 규칙이나 가이드라인을 설정하여 스타일링 규칙의 일관성을 유지하는 것이 중요하다.
• 두 라이브러리를 모두 사용하게 되므로 최종 번들 크기가 약간 더 커질 수 있다.