CRA + Emotion 사용시 jsx pragma 선언 없이 css 사용 방법

Create React App(CRA) 에서 이모션 사용 시 아래와 같이 매번 jsx pragma 선언이 필요합니다. 이 코드를 제거하기 위해서는 바벨 설정이 필요합니다.

/** @jsx */
import { css } from '@emotion/react'

하지만 기본적으로 CRA는 바벨 사용자 설정을 막아놓았습니다. 다음의 명령어를 수행하게 되면 숨겨져 있던 모든 설정들(All configurations, webpack, babel 설정 파일 등)과 패키지들이 가지는 의존성을 볼 수 있습니다.

yarn eject

주의할 점은, 한번 eject를 수행하게 되면 이전 상태로 되돌아 갈 수 없습니다.

craco는 Create React App Configuration Override의 약자로 eject를 하지 않고 CRA를 커스텀마이징 할 수 있습니다.

 

craco 패키지 설치

yarn add @craco/craco

craco를 설치했으면 package.json에서 scripts 부분을 다음과 같이 수정합니다.

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  // ...
},

emotion 관련 패키지 설치

yarn add @emotion/react
yarn add @emotion/babel-preset-css-prop

tsconfig.json

"jsxImportSource": "@emotion/react"

 

프로젝트 root 경로에서 craco.config.js 파일을 생성하고 babel preset을 설정합니다.

craco.config.js

module.exports = {
  babel: {
    presets: ['@emotion/babel-preset-css-prop'],
  },
}