CRA + Emotion 설정

craco 사용하는 이유

Create React App(CRA)처럼 babel 설정을 커스텀할 수 없는 환경에서는 Emotion 사용 시 매번 JSX Pragma 선언이 필요합니다.

CRA에서도 eject를 통해 설정할 수 있지만 webpack, babel 등의 설정들을 유지보수해주는 등의 CRA 장점을 잃습니다.

따라서, eject를 하지 않고 CRA를 커스텀마이징 할 수 있도록 도와주는 craco 를 이용해 보겠습니다.

---

craco

craco Create React App Configuration Override)는 CRA 환경에서 설정을 커스텀마이징할 수 있도록 도와주는 역할을 합니다.

CRA 환경에서도 eslint, babel, postcss 등의 설정을 바꿀 수 있습니다.

• 설치

  npm i @craco/craco
  

---

사용방법

1. package.json에서 script 부분 수정

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

2. emotion 관련 패키지 설치

   npm i @emotion/react
   npm i @emotion/babel-preset-css-prop
   

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

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