Styled Components와 Tailwind CSS

최근에 진행했던 프로젝트 2가지가 있는데 하나는 스타일드 컴포넌트로, 하나는 테일윈드 CSS로 작업했었다.

 

이 내용들을 포트폴리오에 녹여내던 중 '내가 이 두 가지를 정확히 이해하고 사용하고 있는가..?' 라는 생각이 문뜩 들었다.

둘 다 처음에 배워두면 좋다고 해서 사용하는 방식만 공부했지, 이해하고 사용하고 있지 않다는 사실을 깨닫게 되었다.

 

그래서 오늘은 Styled Components와 Tailwind CSS에 대해 자세히 알아보고자 한다!

 

CSS란?

우선 두 가지를 공부하기 전 가장 기초인 CSS가 뭔지부터 찾아봤다.

 

웹 페이지의 레이아웃 및 스타일을 정의하는 스타일 시트 언어
즉, 웹 페이지의 시각적 요소를 담당

 

 

위 내용을 읽어보면 CSS는 웹 페이지에서 굉장히 중요한 부분이라는 것을 알 수 있다. 

그래서 웹 페이지 개발자라면 이 부분에서 소홀하면 안된다! 

 

그런데 여기서 든 의문은 "사람들은 왜 CSS 자체로 개발을 하지 않는가?" 이다.

그 이유는 아래와 같다.

1. 복잡한 스타일 관리 용이성
2. 브라우저 개발 방식의 변화 (리액트, Next.js 등)
3. 동적 스타일링 요구

3가지 외에도 다양한 이유들이 있지만 결론은 효율적인 개발을 하고 싶기 때문이다.

 

이를 도와주는 것들이 바로 Styled Components와 Tailwind CSS 같은 도구 또는 라이브러리이다.

 

스타일드 컴포넌트 (Styled Components)와 테일윈드 CSS (Tailwind CSS)

Styled Components와 Tailwind CSS의 차이점을 간단하게 표로 정리해봤다.

	스타일드 컴포넌트 (Styled Components)	테일윈드 CSS (Tailwind CSS)
접근 방식	- JS 기반의 CSS-in-JS 라이브러리 - 리액트에서 컴포넌트와 스타일이 결합되어 유지보수 및 재사용성을 높일 수 있음	- HTML 클래스에 특정 클래스를 추가하여 스타일을 정의하는 유틸리티 프레임워크 - 클래스 기반의 스타일링이기 때문에 시스템을 일관되게 유지 및 빠른 작업 가능
언어 및 문법	- JS 기반으로 스타일 작성	- HTML 클래스에 미리 정의된 클래스를 추가하여 스타일 적용
동적 스타일링	- JS의 변수 및 조건문을 활용해 동적으로 스타일 조작 - 런타임에 동적으로 스타이리 생성	- 클래스 기반 스타일이기 때문에 정적 스타일에 장점을 보임 - 동적 스타일링은 클래스 조합을 통해 생성
번들 크기 및 성능	- 런타임에 스타일이 생성되므로 번들 크기 커질 수 있음	- 빌드 시에 정적으로 클래스가 생성되므로 일반적으로 번들 크기 작음

 

 

위에 내용을 읽어만 봐도 차이점을 알 수 있지만, 실제 코드로 본다면 그 차이점이 더 크게 와닿을 거 같다.

(예제는 자주 사용하는 상하좌우 중앙 정렬 코드이다.)

// StyledComponentsCentering.js
import styled from 'styled-components'; // 스타일드 컴포넌트의 경우 import 필수
const CenteredContainer = styled.div` // 스타일 선언
  display: flex;
  justify-content: center;
  align-items: center;
`;
<CenteredContainer></CenteredContainer> // 적용


// TailwindCSSCentering.js
<div className="flex justify-center items-center"></div> // 선언 및 적용

 

실제 코드를 본다면 둘의 차이점이 명확하게 보인다.

 

예제 코드만 본다면 'Tailwind CSS가 더 코드가 간결한데? 그럼 저게 좋은거 아닌가?' 라고 생각 할 수도 있다.

하지만 Tailwind CSS는 적용하기 어려운 스타일이 존재 + 커스텀 CSS 규칙 우선 순위 등과 같은 상황들이 있어 사용이 마냥 편하지만 않다.

 

Styled Components와 Tailwind CSS 모두 각자의 장점이 명확하기 때문에 개발자의 개인적인 취향과 프로젝트 특성에 맞는 것을 선택하면 될 거 같다!