styled-components vs Emotion : 스타일링 정리🧵

안녕하세요! 웹 36기 YB 한승우입니다.

 

---

1. CSS-in-JS란 무엇일까?

이전에 책이나 강의를 통해 공부하면서 알게 되었는데, CSS-in-JS는 말 그대로 JavaScript 안에 CSS를 작성하는 방식을 의미하고 있었다. 기존의 전통적인 방식과 달리, 스타일과 로직이 한 파일 안에서 함께 동작한다는 점이 가장 큰 특징이었는데, 이번 3주차 세미나에서 styled-components와 Emotion와 같은 CSS-in-JS 라이브러리를 다루고 있어 이번 기회에 확실히 두가지 라이브러리를 정리하고자 한다.

 

먼저 두 라이브러리 다 리액트 프로젝트에서 컴포넌트 단위로 스타일을 깔끔하게 관리할 수 있다는 점이 정말 매력적이다.

 

🎯 컴포넌트 중심 개발 방식에서 자연스럽게 등장한 흐름이라고 할 수 있었다.

 

기존 방식은 다음과 같았다.

 

<button class="primary">클릭</button>
  .primary {
  background-color: blue;
  color: white;
}

 

반면, CSS-in-JS 방식은 다음과 같이 작성되었다.

const Button = styled.button`
  background: blue;
  color: white;
`;

 

JS 안에서 스타일을 정의하고, 그 자체가 React 컴포넌트처럼 동작하는 것이다.

 

---

2. styled-components와 Emotion이란?

이번에 공부하며 두 가지 주요 라이브러리인 styled-components와 Emotion을 비교하게 되었는데, 둘 다 CSS-in-JS를 구현할 수 있는 라이브러리였다.

📦 styled-components

• 템플릿 리터럴을 기반으로 작성되었고,
• 컴포넌트 단위로 스타일을 정의할 수 있었다.
• 내부적으로는 className을 자동으로 생성하여 스타일 충돌을 방지하고 있었다.
• ThemeProvider를 통해 전역 테마 설정도 지원되었다.

const Title = styled.h1`
  color: ${(props) => props.color || 'black'};
`;

 

⚡ Emotion

• @emotion/react와 @emotion/styled 두 가지 방법으로 사용이 가능했으며,
• styled 방식은 styled-components와 유사했고,
• css prop이나 css() 함수로 유연한 스타일링도 가능했다.
• 성능 면에서 조금 더 가볍고 빠르다고 평가받고 있었다.

/* @jsxImportSource @emotion/react */

const style = css`
  color: blue;
  padding: 10px;
`;

function Text() {
  return <p css={style}>안녕하세요</p>;
}

---

3. 비교 포인트 ✨

📌 문법 차이

• styled-components는 CSS 문법에 가까운 템플릿 리터럴을 사용하고 있었고,
• Emotion은 여기에 더해 css prop과 객체 스타일링도 제공하고 있었다.

🚀 성능

• Emotion은 런타임 오버헤드가 적고 번들 크기가 작아서 빠른 퍼포먼스를 보여주고 있었고,
• styled-components는 풍부한 기능과 직관적인 문법을 제공하지만 상대적으로 무거울 수 있었다.

🎨 테마 설정

• 두 라이브러리 모두 ThemeProvider를 통한 테마 지원이 가능했지만,
• Emotion은 다양한 방식으로 스타일을 적용할 수 있다는 점에서 유연성이 더 높게 느껴졌다.

🧠 학습 곡선

• styled-components는 CSS와 매우 유사한 문법이어서 진입장벽이 낮은 편이었고,
• Emotion은 여러 방식이 섞여 있어서 조금 더 깊이 이해하고 써야 했다.

---

4. 내가 정리한 결론

1.styled-components는 직관적인 문법과 넓은 커뮤니티, 안정적인 사용성이 강점이었다.
2. Emotion은 성능과 유연성, 다양한 스타일 방식이라는 강점을 가지고 있었다.

 

---

5. 마무리 ✍️

이번 주차는 styled-components와 Emotion을 책과 아티클을 참고해 공부하고 정리해보게 되었다.
각자의 장단점이 확실히 있었고, 프로젝트의 성격이나 팀의 스타일에 따라 선택이 달라질 수 있겠다는 걸 느꼈다.

다음에는 실제 프로젝트에 적용하면서 차이점을 더 느껴보고 싶다는 생각이 들었다.
함께 공부하는 스터디원들에게도 이 글이 작은 도움이 되었으면 좋겠다 💪