Emotion 사용하기

📌시작하며

CSS 라이브러리 중 emotion을 사용해보고 정리하는 글!

✅emotion

emotion은 CSS in JS 방식으로 스타일을 작성할 수 있는 라이브러리다! CSS in JS 방식으로 작성하는 방법은 이미 Styled Component를 사용해봤기 때문에 이해하는 것 자체는 어렵지 않았다. 👀 (작성하는 방식도 거의 비슷하고….)

emotion을 사용하는 방법에는 크게 두 가지가 있는데 이 중 react를 이용해 사용하는 법에 대해 정리해보고자 한다.

npm install @emotion/react @emotion/styled

이때 styled API를 사용하고 싶을때만 @emotion/styled를 설치해주면 된다. 이제 진행해보자!

➡️TS 사용

먼저 TSConfig compilerOptions에 다음과 같은 내뇽을 추가해주어야 한다.

{
  "jsx": "react-jsx",
  "jsxImportSource": "@emotion/react"
}

➡️CSS Type

CSS 타입을 설정할 땐 csstype 패키지를 사용해 type을 정의해준다.

npm install csstype

➡️Babel Plugin

Babel은 최신 자바스크립트 코드를 구형 브라우저에서도 사용할 수 있도록 해주는 트랜스파일러다. 😎

만약 현재 사용자가 Babel을 사용하고 있다면 다음과 같이 플러그인을 추가해 줄 수 있다.

npm install -D @emotion/babel-plugin

✅CSS 작성하기

emotion에서 제공하는 css 기능을 이용해 다양한 방식으로 스타일링 할 수 있다.

➡️객체리터럴

먼저 아래와 같이 객체 리터럴(객체 정의 구문) 방식으로 작성해 줄 수 있다. 작성할 때 두개의 괄호 `` 안에 넣어야 하는 것에 주의하자.

import { css } from "@emotion/react"

const Practice = () => (
  <div
    css=
  >
    마우스를 호버하세요!
  </div>
)

➡️템플릿리터럴

백틱을 사용해 작성하는 방식도 존재한다. 위에서 객체리터럴을 사용할 때는 backgroundColor과 같이 Camel Case로 작성했으나, 템플릿 리터럴의 경우 background-color처럼 일반 css 작성 방식과 동일하게 작성해야 함에 주의한다.

import { css } from "@emotion/react"

const Practice = () => (
  <div
    css={css`
      background-color: red;
      &:hover {
        color: lightgreen;
      }
    `}
  >
    마우스를 호버하세요!
  </div>
)

➡️변수 사용하기

변수로 css내용을 선언하여 적용할 수도 있다!

import { css } from "@emotion/react"

const buttonStyle = css`
  color: red;
  &:hover {
    color: lightgreen;
  }
`

const Practice = () => (
  <button className={buttonStyle}>마우스를 호버하세요!</button>
)

✅Styled API 사용하기

Styled API를 사용해 스타일이 적용된 element를 만들 수 있다! 기존에 사용해보았던 Styled Component 작성과 동일한 방식이다.

import styled from "@emotion/styled"

const Button = styled.button`
  color: red;
  &:hover {
    color: lightgreen;
  }
`

const Practice = () => <Button>마우스를 호버하세요!</Button>

✅Emotion VS Styled-Components

근데 이쯤 되니… 두 가지의 CSS in JS가 어떤 차이점이 있는지 궁금해졌다.

먼저, emotion 공식 문서에서도 자신들의 styled API가 Styled Components와 glamorous에서 많은 영감을 받았다고 쓰여있다. 🤔

깃허브 ⭐을 참고해보면 styled components가 40.2k, emotion이 17.3k로 styled components가 훨씬 높지만, 최근 다운로드 수를 보면 @emotion/react > styled components > @emotion/styled의 양상을 보인다. 🤔

라이브러리 사이즈는 styled components가 @emotion/react와 @emotion/styled 보다 큰 편이다.

만약 @emotion/react만 사용한다면 더 가벼워진다.😌

여러 글 들을 찾아보았는데, 어떤 글은 emotion이 성능상 이점이 있다고는 하지만 styled components도 성능 향상을 이루고 있다고 한다.

개인적으로는 사이즈가 작고, css props와 styled API를 모두 가지고 있다는 점에서 emotion의 손을 들어주고 싶다.

🗂️참고 사이트

• https://emotion.sh/docs/introduction
• https://npmtrends.com/@emotion/react-vs-@emotion/styled-vs-styled-components
• https://bundlephobia.com/