Builder.shin

React 17의 JSX Transform과 import React 생략

문제 상황

회사 프로젝트를 React 17로 업그레이드하면서 새로운 JSX Transform을 적용해보기로 했다. 기존에는 JSX를 사용하는 모든 파일에서 React를 import 해야 했는데, 이제는 그럴 필요가 없어졌다고 한다.

기존 방식의 불편함

import React from 'react';

function Button() {
  return <button>Click me</button>;
}

매번 파일마다 import React를 작성해야 했고, ESLint에서 "'React' is defined but never used" 경고가 뜨는 것도 신경 쓰였다. 실제로는 JSX 트랜스파일 과정에서 React.createElement로 변환되기 때문에 필요했지만, 코드상으로는 사용하지 않는 것처럼 보였다.

새로운 JSX Transform

React 17부터는 Babel과 협력하여 새로운 변환 방식을 도입했다.

// import React 없이 작성 가능
function Button() {
  return <button>Click me</button>;
}

내부적으로는 react/jsx-runtime에서 자동으로 필요한 함수를 import 한다.

적용 방법

CRA 프로젝트

react-scripts 4.0.0 이상이면 자동으로 적용된다. 별도 설정이 필요 없었다.

커스텀 Webpack 프로젝트

.babelrc 수정이 필요했다:

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

ESLint 설정

기존 react/react-in-jsx-scope 규칙을 비활성화했다:

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

체감 효과

  • 번들 사이즈 약간 감소 (컴포넌트가 많을수록 효과적)
  • 보일러플레이트 코드 감소
  • 신규 개발자 온보딩 시 설명할 내용 하나 줄어듦

다만 기존 파일 200여 개에서 import 문을 일괄 제거하는 작업은 신중하게 진행했다. 혹시 모를 side effect를 방지하기 위해 단계적으로 적용하고 있다.

결론

작은 변화지만 개발 경험이 확실히 개선되었다. React 18도 곧 출시될 예정이라고 하니, 미리 17로 업그레이드하면서 적응하는 것도 나쁘지 않은 선택이었다.

React 17의 JSX Transform과 import React 생략