[React] styled-components와 emotion는 무슨 차이 ?

🚀 styled-components와 emotion, 비슷해보이는데.. 뭐가 다를까

저는 css-in-js를 styled-components로 시작하게 되어서 줄곧 styled-components만 사용했었는데요. 그런데 emotion을 사용하는 회사도 많아서 한번 사용해 보았는데 사용법이 거의 동일해서 대체 어떤 차이가 있는지 궁금해 정리하게 되었습니다 :)

제공하는 기능

라이브러리	props 전달	미디어 쿼리	전역 스타일링	중첩 선택자	Server Side Rendering	테마 스타일링	스타일 컴포넌트 상속
styled- components	⭕	⭕	⭕	⭕	⭕	⭕	⭕
emotion	⭕	⭕	⭕	⭕	⭕	⭕	⭕

 

사용 트랜드

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

위 사이트에서 npm 패키지들의 트렌드를 손쉽게 파악할 수 있는데요. 실제로 emotion과 styled-components 중 어떤 패키지를 많이 사용하는지 알 수 있습니다. 두 패키지 모두 많은 개발자들이 사용하는 것을 알 수 있었지만, 제가 지금 작성하고 있는 날을 기준으로 했을 때는 엎치락 뒤치락 하는 것 같네요..

@emotion/react

styled-components

실제 npm에서 이번 주 다운로드 수로 비교해보면 emotion 다운로드 수가 50,000 정도 더 높았습니다.

The State of CSS 2021: CSS-in-JS

위 사이트에서 인기있는 라이브러리들을 확인할 수 있는데요. emotion의 경우 지속적으로 만족도가 떨어지고 있는 것을 확인할 수 있었습니다.

성능

emoition의 번들 사이즈는 7.9kB이고 styled-components의 번들 사이즈는 12.7kB라고 합니다. 두 라이브러리 모두 거대하지 않지만, emotion이 좀 더 사이즈가 작은 것을 알 수 있었습니다.

속도의 경우에도 emotion이 근소하게 더 빠르다고 합니다.

결론적으로, 성능상 유의미한 차이는 없다고 생각되었습니다.

emotion의 차별점

1. css props 기능

✨ 인라인 스타일 

emotion jsx에서 제공해주는 css 속성을 활용하면 이를 클래스로 변환해주어서, 기존 인라인으로는 사용할 수 없었던 media query, pseudo selector, nested selector 등을 사용할 수 있다고 합니다.

import { css } from '@emotion/react'

const color = 'darkgreen'

return(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

Emotion – The css Prop

✨ css props를 결합해서 복잡한 스타일링 진행 가능

📜 theme.js 파일

const PALETTE = {
  primary: { ... },
  subColor: { ... },
}

const FONT_SIZE = {
  small: '14px',
  medium: '18px',
  large: '20px',
}

const theme = {
  PALETTE,
  FONT_SIZE,
}

export default theme

 📜 사용하는 컴포넌트.js 파일

<div css={[theme.PALETTE[primary], theme.FONT_SIZE[small]]}>

css 변수를 객체로 관리하며 위와 같이 조합하여 컴포넌트 스타일링을 진행할 수 있습니다.

아래 사이트에서 emotion으로 스타일 컴포넌트를 다양한 방법으로 사용한 방법이 소개되고 있어서 같이 첨부했습니다 :)

Storybook을 활용하여 본격적으로 디자인 시스템 구축하기

2. SSR

emoition은 Server Side Render에서 별도의 설정 없이 동작됩니다. 반면 styled-components의 경우 ServerStyleSheet을 설정해야 한다고 합니다.

결론

• 유의미한 성능 차이는 없었습니다.
• 개발팀에서 둘 중 어느 라이브러리를 사용하고 있다 하더라도 사용법이 비슷해서 바로 적용이 가능해 보였습니다.
• emotion의 경우 css props로 css를 더 활용도 높게 조립할 수 있었습니다. 하지만 props는 styled-components도 가능하기에 styled-components로도 충분히 구현이 가능해 보였습니다.
• SSR에서는 emotion 세팅 시 더 간편합니다.