styled-components와 @emotion/styled

안녕하세요 YB 김정민입니다!

오늘은 css 라이브러리에 대해 작성해보고자 합니다.

---

다들 css 라이브러리 어떤거 주로 사용하시나요? 저는 styled-components를 애용했었는데.. 네.. 그렇게 되었죠

새로운 라이브러리 찾아보던중에 @emotion/styled에 대해 알게 되었고 styled-components와 많이 유사하다고 느껴졌습니다.
그래서 두 라이브러리의 차이점이 뭔지 어떤게 같은지 공유해보고자합니다!!

---

styled-components

styled-components는 가장 대표적인 CSS-in-JS 라이브러리 중 하나입니다. React 컴포넌트 내부에서 JavaScript로 CSS를 작성할 수 있게 해주며, 스타일과 컴포넌트를 하나의 단위로 캡슐화하는 방식입니다.
CSS는 실제로 <style> 태그로 렌더링되고, 고유한 클래스명이 자동으로 생성되므로 클래스 중복 문제를 방지할 수 있습니다.

장점

• 문법이 직관적: CSS와 거의 동일한 문법 사용.
• 강력한 커뮤니티: 문서화, 레퍼런스, 예제 풍부.
• 컴포넌트 기반 스타일링: 스타일과 로직이 명확히 결합.
• Theming 지원: ThemeProvider로 전역 스타일 쉽게 설정.

단점

• 번들 크기: 비교적 무거운 편.
• 성능 이슈: 서버사이드 렌더링 시 성능이 다소 떨어질 수 있음.
• css prop 미지원: 간단한 스타일을 inline처럼 쓰기 어렵다.

주요 특징

• styled.div\`` 같은 템플릿 리터럴 사용 방식
• props를 통해 조건부 스타일링 가능
• 컴포넌트 간 스타일 상속 가능
• ThemeProvider로 전역 스타일링 적용 가능

---

@emotion/styled

@emotion/styled는 Emotion 라이브러리의 스타일드 컴포넌트 방식입니다. styled-components와 거의 동일한 문법을 제공하지만, 더 가볍고 빠른 런타임을 목표로 개발된 라이브러리입니다. @emotion/react와 함께 사용하면 css prop, 클래스 이름 커스터마이징 등 다양한 기능을 함께 쓸 수 있습니다.

 

장점

• 경량화 & 빠른 런타임: 작은 번들 크기, 빠른 실행 속도
• css prop 지원: 간단한 스타일링에 유용
• Babel 플러그인 최적화: 정적 스타일 추출 가능
• 다양한 프레임워크 호환: React 외에도 Preact, Vue 등 일부 지원

단점

• 초보자에게는 다소 생소한 설정: babel-plugin 등 설정 요소 많음
• 커뮤니티 상대적으로 작음: styled-components보단 자료가 적음

주요 특징

• 템플릿 리터럴 기반의 스타일 선언
• css prop을 이용한 inline 스타일링 지원
• 스타일을 JS 객체 형태로도 작성 가능
• 높은 퍼포먼스, SSR에 적합

---