@emotion/react 사용시의 pragma

@emotion/react를 사용할때 pragma가 필요한 이유?

• emotion에서 제공하는 css props를 사용하기 위해서 설정이 필요하다. 방법은 2가지.
  두가지 방법 모두 컴파일된 코드는 같다. 프리셋을 사용하거나 프라그마를 설정하면, 컴파일되는 jsx 코드는 react.createElement 대신에 emotion에서 제공하는 jsx 함수를 사용하게 된다.
• 예:

<img src="avatar.png" />

위의 코드는 아래처럼 컴파일된다.

React.createElement('img', { src: 'avatar.png' });
// 디폴트일 때

jsx('img', { src: 'avatar.png' })
// emotion 사용시

1) Babel Preset

• 바벨 설정에 커스텀을 추가하는 방법
• CRA 환경에서라면 적용되지 않고, 만약 CRA 환경에서 적용하려면 craco 등을 사용해서 config를 커스텀할 수 있어야 한다.

{
// .babelrc 파일
  "presets": ["@emotion/babel-preset-css-prop"]
}

2) JSX Pragma

• jsx를 읽는 바벨 플러그인이 react.createElement 대신 jsx 함수를 사용하도록 함
• 바벨한테 jsx 형식을 컴파일할때 어떤 함수를 사용할지 알려줌
  https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma

• classNames props를 받을 수 있는 모든 엘리먼트에는 css 설정할 수 있음