CRA + emotion.js 환경에서 jsx pragma 선언 없이 css 사용하기

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

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

cra 환경에서 바벨 설정을 변경하려면 eject를 해야하는데 eject시 되돌릴 수 없으므로 craco의 도움을 받아 설정해보겠습니다! (typescript 환경입니다)

1. craco 설치

$ yarn add @craco/craco

2. package.json scripts 설정 변경

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

3. tsconfig.json 설정 추가

 "compilerOptions": {
 	...
        "jsxImportSource": "@emotion/react",
        ...
}

4. emotion babel 관련 패키지 설치

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

5. craco.config.js 파일 생성

root 경로에 craco.config.js 파일을 생성하고 아래 코드를 입력합니다.

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

이렇게 설정 해 주시면 매번 파일 상단에 jsx pragma를 선언하지 않아도 됩니당😆