emotion과 styled-component


1. 사용빈도 및 트렌드?

@emotion/core vs @emotion/react vs styled-components | npm trends

위 사이트에서 npm패키지들의 트렌드를 손쉽게 파악할 수 있다. 실제로 emotion과 styled-components 중 어떤 패키지를 많이 사용하는지 알아봅시다.

emotion이 v10에서 v11이 되면서 @emotion/core 에서 @emotion/react로 package rename이 이루어졌다. 하지만 아직 v10을 사용하는 개발자들이 있어서 두 패키지를 모두 포함해서 비교해 보았습니다.

두 패키지 모두 많은 개발자들에게 사랑받는 것을 확인할 수 있었습니다. 2022년 기준으로 emotion이 @emotion/core와 @emoiton/react를 합쳤을 때, styled-components보다 2배정도 많은 다운로드 수를 가지고 있습니다.

Untitled

2. 코드에서의 차이

실제로 코드에선 어떤 차이가 있을지 알아보자. 우선 두 패키지를 모두 설치합니다. styled-components를 Typescript에서 사용하려면 @types/styled-components 패키지를 추가로 설치해주어야 합니다.