Emotion과 Styled-components는 둘 다 CSS-in-JS 라이브러리이다.

Styled-components

CSS-in-JS의 초기 구현체 중 하나로, 많은 커뮤니티 지원과 문서가 있다.

아무래도 예전부터 사용하다보니 익숙하다는 장점이 존재하는 정도

html 부분에서 어떤 태그인지 한 번에 알아볼 수 없다는 단점이 존재한다.

Emotion

styled-component에 비해서 번들사이즈가 가볍다. (@emotion/react 만 설치했을 때 기준)

css 함수를 이용하면 인라인 스타일을 작성해도 클래스로 처리되어 스타일 우선순위를 설정하기 용이하며, 인라인에서도 css 문법을 사용할 수 있다.

<div css={{color: "red"}} />
{/* 혹은 */}
<div css={css`color: red`} />

기존 인라인으로 사용할 수 없었던 media query, pseudo selector, nested selector 등을 사용할 수 있다.