React 17 RC 살펴보기 - 주요 변경사항과 마이그레이션

배경

React 17 RC가 8월에 공개되었고, 팀 프로젝트에 적용 가능성을 검토하기 위해 테스트 브랜치에서 마이그레이션을 진행했다.

주요 변경사항

1. 이벤트 위임 변경

기존에는 이벤트 핸들러가 document에 등록되었지만, 17부터는 루트 DOM 컨테이너에 등록된다.

// 기존: document에 이벤트 위임
// React 17: rootNode에 이벤트 위임
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

이는 같은 페이지에 여러 React 버전을 사용할 때 문제를 방지한다. 우리는 레거시 jQuery 위젯과 함께 사용 중이라 도움이 될 것으로 보인다.

2. JSX Transform 개선

새로운 JSX Transform을 사용하면 import React from 'react'를 생략할 수 있다.

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

// React 17 (새 JSX Transform)
function Component() {
  return <div>Hello</div>;
}

.babelrc 설정 변경으로 활성화했다.

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

3. 이벤트 풀링 제거

e.persist() 호출이 불필요해졌다. 성능 최적화를 위한 이벤트 풀링이 제거되어 코드가 간결해진다.

마이그레이션 이슈

큰 breaking change는 없었다. 기존 테스트 코드도 대부분 통과했다. onScroll 이벤트 핸들러에서 e.persist()를 제거하는 정도의 작업만 필요했다.

결론

React 17은 "발판 릴리스"라는 표현대로 기능보다는 향후 점진적 업그레이드를 위한 기반 작업에 집중했다. 정식 릴리스가 나오면 프로덕션 적용을 검토할 예정이다.