CRA Typescript + @emotion/react css props 오류 해결 방법 및 jsx pragma 선언 없이 css 사용하기
공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다.
찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다.
/** @jsx jsx */
위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다.
/** @jsxImportSource @emotion/react */
그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다.
번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다.
그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다.
hotpink 색을 적용했지만 검정색으로 표시되었다.
해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다.
eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다.
아래 두 패키지를 설치한다.
npm i @craco/craco
npm i @emotion/babel-preset-css-prop
설치한 후 package.json을 아래와 같이 수정한다.
tsconfig.json에 아래 코드 복사 붙여넣기
"jsxImportSource": "@emotion/react"
프로젝트 root 경로에 craco.config.js 파일 생성하고 babel preset을 성정한다.
module.exports = {
babel: { presets: ['@emotion/babel-preset-css-prop'] },
};
아래처럼 hotpink가 잘 적용된것을 확인 할 수 있다.
댓글
댓글 쓰기