React의 new JSX Transform, emotion의 css prop 설정법

 

 emotion에서는 css라는 이름의 prop을 통해 스타일을 할 수 있는데, 당연히 이런 이름의 prop이 모든 html 요소에 존재하지 않으므로 추가적인 설정이 필요하다.

 

 공식 문서에서 여러 방법을 안내하고 있는데, 상당히 파편화되어 있어서 조금은 불친절한 문서화라고 느꼈다. 오늘은 이 설정을 하면서 알게 된 react의 new JSX Transform에 대해서 적어보려고 한다.

 

어느새부터 React를 사용할 때 import React from ‘react’를 사용하지 않아도 된다고만 기억하고 있었는데, 그 정확한 이유는 React 17부터는 JSX를 transform 하는 새로운 방법이 도입되었기 때문이다.

 

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

 

전통적인 방식의 JSX 변환은 이렇게 이루어진다.

React.createElement 함수를 호출하여 element를 생성하기 때문에 import문이 항상 필요했다.

공식 문서에 의하면 이 old 방식을 새로운 방법으로 수정한 이유는 크게 두 가지가 있는데,

 

1. 앞서 언급했듯이 항상 import문이 필요하고
2. 이러한 형태의 변환에는 적용될 수 없는 성능적인 개선, 단순화가 있기 때문

이라고 한다. 2번의 구체적인 사유에 대해서는 한글로 잘 정리된 아티클이 있어 첨부한다.

 

 

 

 그러면 new JSX Transform 의 결과물은 기존과 비교해서 어떻게 달라질까? 

 

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

 

 이렇게 react/jsx-runtime이 JSX 변환의 새로운 진입점 (entry point)가 된다.  중요한 점은 이러한 변환 및 import는 컴파일러에 의해서 자동적으로 이루어지기 때문에 개발자는 전혀 신경 쓸 필요가 없다는 점이다. 또한 기존의 코드도 전혀 변경하지 않아도 된다.

 

 여담이지만 개인적으로 감명깊었던 점은 React가 레거시를 충분히 존중해준다는 점이다. Class component에서 Function 컴포넌트로 대세가 넘어갔지만 이전의 방식을 deprecate 시키지 않는 등 React 진영에서는 이전의 코드 베이스들을 수정하지 않아도 무방하도록 버전 업데이트를 진행한다. 만약 필요를 느낀다면 천천히 변경할 시간이 주어지는 것이고, 필요하지 않다고 느낀다면 그냥 레거시를 유지해도 되는 것이다. 또한 React가 좋은 개발자 경험을 제공하기 위해서 노력한다는 것을 이런 사례를 통해 통감하게 된다.

 

 이제 new JSX Transform을 emotion에서 설정해 보자. 공식 문서에 다음의 절차를 소개하고 있다.

 

 .babelrc 

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

 

 이제 emotion의 css prop을 추가하도록 설정하자.

 

tsconfig.json 의 compilerOptions

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

 

 

 앞서 살펴본 new JSX Transform에서, jsx파일의 새로운 진입점이 React.createElement가 아닌 react/jsx-runtime의 jsx임을 확인했다.

@emotion/react의 코드를 살펴보면 해당 jsx함수에서 css prop이 존재하는 경우 새롭게 정의를 확장시키는 것을 볼 수 있다. 위의 tsconfig설정은 이런 진입점 및 jsx의 확장을 위한 설정으로 생각할 수 있다. 한글로 된 좋은 아티클이 있어서 첨부한다.