Builder.shin

React 17 RC와 점진적 업그레이드 전략

배경

8월 초 React 17 RC가 릴리즈되었다. 이번 버전은 새 기능이 없는 특이한 메이저 업데이트다. 대신 여러 버전의 React를 한 페이지에서 사용할 수 있게 하는 것이 목표다.

회사 프로젝트는 React 16.8에서 멈춰있었다. 일부 레거시 코드 때문에 업그레이드가 부담스러웠는데, 이번 기회에 점진적 마이그레이션 전략을 검토했다.

주요 변경사항

이벤트 위임 변경

기존에는 document에 이벤트를 위임했지만, 17부터는 React 트리의 루트 DOM 컨테이너에 위임한다.

// React 16까지
document.addEventListener()

// React 17부터
rootNode.addEventListener()

이 변경으로 여러 React 버전을 한 페이지에서 안전하게 사용할 수 있다. jQuery 기반 레거시 코드와의 공존도 더 안정적이다.

JSX Transform

새로운 JSX 변환 방식이 추가되었다. 더 이상 import React from 'react'를 명시하지 않아도 된다.

// 기존
import React from 'react';
function App() {
  return <div>Hello</div>;
}

// 새 변환 (선택사항)
function App() {
  return <div>Hello</div>;
}

바벨 설정에서 runtime: 'automatic'으로 활성화할 수 있다.

마이그레이션 계획

  1. 먼저 개발 환경에서 RC 버전 테스트
  2. 이벤트 핸들러 관련 e2e 테스트 전수 실행
  3. jQuery 의존성 있는 페이지 별도 검증
  4. 정식 릴리즈 후 프로덕션 적용

당장 급한 건 아니지만, 향후 React 18로 가는 중간 단계로 준비해둘 가치가 있어 보인다.

참고

React 17 RC와 점진적 업그레이드 전략