Builder.shin

React 17 RC와 JSX Transform 변경 사항

배경

재택근무 중 React 17 RC 릴리즈 노트를 확인했다. Breaking Change가 거의 없다는 점이 특이했고, 가장 눈에 띈 것은 새로운 JSX Transform이었다.

기존에는 모든 컴포넌트 파일 상단에 import React from 'react'를 작성해야 했다. JSX가 React.createElement로 변환되기 때문이다.

변경 사항

새 JSX Transform에서는 컴파일러가 자동으로 필요한 함수를 import한다.

기존 방식

import React from 'react';

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

새 방식

// import React 불필요
function App() {
  return <h1>Hello World</h1>;
}

적용 과정

사내 프로젝트에 테스트로 적용해봤다.

  1. React 17 RC 설치
npm install [email protected] [email protected]
  1. Babel 설정 업데이트 (CRA 4 alpha 사용 시 자동)
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}
  1. ESLint 설정 추가
{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

실제 영향

  • 번들 크기가 약간 감소했다 (수십 KB 수준)
  • 새 파일 작성 시 import 하나 덜 쓰는 게 편하긴 하다
  • 기존 코드는 그대로 둬도 동작한다

당장 프로덕션에 적용하긴 이르지만, 정식 릴리즈 후 점진적으로 마이그레이션할 계획이다. Hook 도입 때처럼 급하게 바꿀 필요는 없어 보인다.

React 17 RC와 JSX Transform 변경 사항