🔹 1️⃣ Emotion (이모션)
🧩 개념
- CSS-in-JS 라이브러리 중 하나.
- 자바스크립트 안에서 CSS를 직접 작성할 수 있음.
- 리액트 컴포넌트별로 스타일을 “모듈화”하기 좋아요.
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
const buttonStyle = css`
background: hotpink;
border: none;
padding: 10px;
color: white;
`;
export const Button = () => <button css={buttonStyle}>Click</button>;or styled 방식:
import styled from '@emotion/styled';
const Button = styled.button`
background: hotpink;
color: white;
`;✅ 장점
- 컴포넌트 단위로 스타일 캡슐화 (충돌 없음)
- props로 동적 스타일 쉽게 처리
- 타입스크립트 친화적
- MUI(Material UI)가 내부적으로 Emotion 사용
❌ 단점
- JS로 런타임에 스타일 생성 → 퍼포먼스 약간 손해
- 설정(바벨, SSR) 조금 번거로움
🔹 2️⃣ styled-components
- Emotion과 거의 비슷한 CSS-in-JS 계열
- 문법 거의 동일함 (Emotion이 후발주자라 더 가벼움)
- 예전에는 styled-components가 표준처럼 많이 쓰였음
import styled from 'styled-components';
const Button = styled.button`
background: hotpink;
color: white;
`;✅ 장점
- 직관적이고 배우기 쉬움
- 큰 커뮤니티, 레거시 프로젝트에서 여전히 많음
❌ 단점
- 빌드 속도 느림
- 런타임 스타일 처리로 성능 부담
💡 요약: Emotion과 styled-components는 거의 같은 계열이에요.
요즘은 Emotion이 더 가볍고 빠르다고 해서 MUI 같은 라이브러리들도 Emotion으로 넘어옴.
🔹 3️⃣ Tailwind CSS
🧩 개념
- 완전히 다른 접근법: CSS 유틸리티 클래스 기반 프레임워크
- CSS를 JS 안에 쓰는 게 아니라, HTML className으로 조합해서 스타일 작성
<button className="bg-pink-500 text-white py-2 px-4 rounded">
Click
</button>✅ 장점
- 빠름 (런타임 없음, 정적 빌드)
- 별도 CSS 파일 거의 불필요
- 반응형, 다크모드 등 간편
- 실무에서 “디자인 시스템 없는” 스타트업들이 많이 씀
❌ 단점
- HTML이 class로 지저분해짐
- 커스텀 디자인 복잡할 때는 불편
- 스타일 로직 분리 어려움
💡 요즘 React + Tailwind 조합 진짜 많아요.
Next.js, Remix, Vite 등 프론트엔드 세팅에서 기본 탑재되기도 해요.
🔹 4️⃣ 비교 요약표
| 항목 | Emotion | styled-components | Tailwind CSS |
|---|---|---|---|
| 스타일 방식 | CSS-in-JS | CSS-in-JS | Utility class |
| 작성 위치 | JS/TS 내부 | JS/TS 내부 | className 속성 |
| 런타임 성능 | 중간 | 다소 느림 | 빠름 (정적) |
| 코드 가독성 | 좋음 | 좋음 | 복잡해질 수 있음 |
| 커스터마이징 | 쉬움 | 쉬움 | 제한적 |
| 실무 사용량 | ✅ 많음 (특히 MUI 연동) | ⚪ 여전히 존재 | ✅ 폭발적 증가 (스타트업/Next.js) |
🔹 5️⃣ 실무 트렌드 (2025년 기준)
-
신규 프로젝트
→Tailwind CSS+Next.js조합이 압도적으로 많음
(빠르고 유지보수 편함) -
디자인 시스템, 컴포넌트 단위 작업 필요
→Emotion사용 (특히 MUI 같은 기업용 UI 라이브러리) -
기존 프로젝트 / 레거시
→styled-components여전히 많음
✅ 결론 요약
| 상황 | 추천 |
|---|---|
| 빠른 개발, 스타트업, 개인 프로젝트 | 🩵 Tailwind CSS |
| MUI 기반, 컴포넌트 설계 중심 | 💜 Emotion |
| 예전 코드 유지보수, 레거시 프로젝트 | 💛 styled-components |
FE