emotion vs. Sass 승자는?!..

이기는 놈이 내 편

2021.12.07수정

featured image thumbnail for post emotion vs. Sass 승자는?!..

Prologue

Image Assets과 Inherit(상속)을 중점적으로 두 가지 방식을 비교합니다.

이 글에서는 CSS 보다는 필자가 좋아하는 Sass 기준으로 설명합니다.

Image Assets

emotion styled로는 import로 image를 불러와서 쓸 수 있습니다. image는 2가지 방식으로 불러와서 쓸 수 있는데 /src/assets/index.js 파일을 만들어 관리합니다.

// /src/assets/index.js

export const images = {
  icons: {
    instagram: require('./images/icons/instagram.svg'),
    ...,
  },
  backgrounds: {
    primaryHeader: require('./images/backgrounds/primary-header.png'),
    ...,
  },
}

export default {}

코드에 있는 icons, backgrounds는 디렉토리입니다.

Next.js 기반이라면 용량이 작은 이미지라면 컴파일시 자동으로 base64 코드로 직접 스타일 파일에 들어갑니다. 이름은 camelCase로 작성합니다.

import { images } from '../../assets'

const Primary = styled.div({
  width: '100%',
  height: '2rem',
  background: `url(${images.icons.instagram}) no-repeat 50% 50%/contain`,
})

불러올 때는 위와 같이 images를 import를 해서 사용합니다.

아래와 같이 이미지 파일을 수동으로 import해서 사용하는 것도 가능합니다.

import IconInstagram from '../../assets/images/icons/instagram.svg'

const Primary = styled.div({
  width: '100%',
  height: '2rem',
  background: `url(${IconInstagram}) no-repeat 50% 50%/contain`,
})

이 경우는 이미지 파일을 직접 import를 하기 때문에 /src/assets/index.js는 필요 없습니다.

단, 디렉토리명과 파일명을 기억하고 있어야 합니다.

Sass는 /src/assets/index.js를 불러올 수 없습니다.

Sass인 경우 /public에 존재하는 이미지만 불러올 수 있기 때문에 이미지가 수정되었을 때 인지하지 못하는 문제가 생길 수 있습니다.

이모션이 이겨따ㅏㅏㅏ

Inherit (상속)

CSS는 상속에 따라서 적용 순서가 달라집니다.

emotion styled는 1단계 상속이고, CSS는 선택자에 따라 레벨 상속이 달라집니다.

그래서 Class 상속을 받은 상태라면 CSS에서 적용한 코드가 emotion styled로 작성한 코드보다 우선 적용되어 emotion styled로 작성한 코드는 취소 됩니다.

싸쓰가 이겨따데스!!!

그래서 뭐가 좋다는 거야?!

아직 한 발 남았단다 나의 고양이

emotion styled는 jsx에 직접 작성하는 코드라서 styled 안의 코드가 변경되면 브라우저에서는 해당 영역이 다시 re-rendering됩니다.

하지만 image assets 관리가 편하기 때문에 필자는 최소한 background image 불러올 때는 무조건 emotion styled로 작성합니다. emotion styled는 props에 따라 스타일 관리도 편하기 때문에 이것도 emotion styled의 장점이라 할 수 있겠네요.

Epilogue

이번 글은 Class 상속 개념을 이미 알고 있지 않다면 이해하기 힘든 글입니다. 상속 개념에 대해서는 기회가 된다면 언젠가 다뤄보겠습니다.

그럼 다음 글에서 만나요! 다음 글 관많부! : )

FIN!