Builder.shin

React 17 RC의 변경사항과 점진적 마이그레이션 전략

배경

9월 초 React 17 RC가 공개되었다. 기존 메이저 버전과 달리 새로운 개발자 기능이 없다는 점이 특이했다. 대신 점진적 업그레이드를 위한 기반 마련에 집중했다고 한다.

운영 중인 레거시 프로젝트가 React 15에서 멈춰있어서, 이번 기회에 마이그레이션 전략을 검토했다.

주요 변경사항

1. 이벤트 위임 변경

기존에는 이벤트 핸들러가 document에 attach 되었는데, 17부터는 React 트리의 루트 DOM 컨테이너에 attach 된다.

// React 16 이하
document.addEventListener(...)

// React 17
rootNode.addEventListener(...)

하나의 페이지에 여러 React 버전을 공존시킬 수 있게 된 것이 핵심이다. jQuery 같은 레거시 코드와 함께 사용할 때도 이벤트 충돌 가능성이 줄어든다.

2. 이벤트 풀링 제거

SyntheticEvent의 이벤트 풀링이 제거되었다. 성능 최적화를 위한 기법이었지만 오히려 혼란을 주는 경우가 많았다.

function handleChange(e) {
  // React 16에서는 e.persist() 필요했음
  setTimeout(() => {
    console.log(e.target.value); // 17에서는 정상 동작
  }, 100);
}

3. JSX Transform

새로운 JSX 변환 방식이 도입되었다. 파일 상단의 import React from 'react'가 필수가 아니게 되었다.

// 더 이상 필요 없음
// import React from 'react';

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

번들 사이즈 감소 효과도 있지만, 자동 import 누락 에러가 사라지는 게 더 큰 장점이다.

마이그레이션 계획

점진적 업그레이드가 가능해진 만큼, 다음 순서로 진행하기로 했다:

  1. 새로운 기능 개발 시 React 17 적용
  2. 레거시 영역은 기존 버전 유지
  3. 안정화 후 순차적으로 업그레이드

당장 Breaking Change는 적지만, 이벤트 시스템 변경이 기존 코드에 영향을 줄 수 있어서 충분한 테스트가 필요하다.

소감

개발자 입장에서는 지루한 릴리스일 수 있지만, 레거시 프로젝트를 다루는 입장에서는 현실적인 업데이트다. React 18의 Concurrent Mode를 위한 준비 단계라고 하니 기대가 된다.

React 17 RC의 변경사항과 점진적 마이그레이션 전략