[React] CRA에서 emotion 세팅하기 (@emotion/react)

1. emotion 설치

공식 문서
react에서 emotion을 세팅하는 방법은 간단하다.
npm install --save @emotion/react

2. import 하기

/** @jsx jsx */
import { jsx, css } from "@emotion/react"

/** @jsx jsx */은 React.createElement 대신 jsx라는 함수로 변환하라는 jsx pragma라고 한다.

JSX pragma란?

우선, pragma란 컴파일러에게 파일을 어떻게 해석할 지 알려주는 것을 의미한다. JavaScript에서의 간단한 예시는 "use strict"가 있는데, "use strict"를 적어주면 JavaScript가 Strict Mode로 해석되게 된다.

그렇다면 JSX pragma는 무엇일까?
기본적으로 JSX 문법은 브라우저에서 읽을 수 없다. 그렇게 때문에 브라우저가 읽게 하려면 JSX는 순수 자바스크립트로 convert 되어야 한다.

많은 React-based framworks에서는 일반적으로 Babel을 통해 해당 작업이 세팅되어 있다. CRA도 마찬가지다.

• 일반적인 예시

// jsx
const element = <h1 className="greeting">Hello, world!</h1>

// js
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
)

왜 JSX pragma를 사용할까?

JSX를 JavaScript로 변경하는 과정을 커스터마이징 할때 유용하다.

import 시 에러

emotion 공식 문서를 따라

/** @jsx jsx */

를 상단에 적어주면 이런 오류가 발생한다.

pragma and pragmaFrag cannot be set when runtime is automatic.

CRA 4 와 같은 새로운 JSX runtimes에는 자동으로 runtime: "automatic" 옵션이 있으므로,
이 오류가 발생하면

/** @jsxImportSource @emotion/react */

으로 바꿔줘야 한다고 한다.
emotion의 설명

3.적용

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

const color = "darkgreen";

const App = () => {
  return (
    <div
      css={css`
        background-color: hotpink;
        &:hover {
          color: ${color};
        }
      `}
    >
      hello world
    </div>
  );
};

export default App;

이렇게 적용할 수 있다.