[React] emotion 설치 및 typescript에서 사용하기 (pragma 제거방법)

react typescript 프로젝트 생성 및 emotion 설치

npx create-react-app [만들 프로젝트 경로] --template typescript

npm install @emotion/react

React가 v17 이후에 emotion을 사용하려면 다음과 같은 pragma를 앞에 입력해줘야 한다.

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

제거하는 방법은 바벨 설정을 건드리는 것인데 CRA로 만든 프로젝트에서는 eject(숨겨진 웹팩 설정 파일들을 보이게 하는 것)을 하면 되돌릴 수 없기 때문에 eject 하지 않고도 설정을 건드릴 수 있는 craco라는 패키지의 도움을 받을 것이다.

 

pragma 제거 방법

1. tsconfig.json 파일 설정

아래와 같이 "jsxImportSource": "@emotion/react" 을 한 줄 추가해준다. 그러면 ts 컴파일러가 pragma를 제거해도 css props에 빨간줄을 띄우지 않는다. 하지만 이건 ts 컴파일러 부분만 해결한 것이기 때문에 정말로 jsxImportSource를 하게 하려면 웹팩 설정을 해줘야 한다.

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

 

2. craco와 emotion-babel-preset 패키지 설치

npm install @craco/craco

npm instsall @emotion/babel-preset-css-prop

 

craco는 웹팩 설정을 하는데 도움을 주는 패키지이고, @emotion/babel-preset-css-prop은 emotion의 css props의 사용을 바벨이 이해할 수 있게 해주는 설정 파일이다.

 

3. craco.config.js

프로젝트의 루트 디렉토리 아래에 craco.config.js 라는 이름으로 파일을 생성하고 다음과 같이 입력한다.

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

 

4. package.json의 scripts 수정

craco가 start와 build 등을 실행할 수 있게 다음과 같이 바꾼다.

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