Builder.shin

React 17 마이그레이션 작업 후기

배경

회사 프로젝트를 React 16.13에서 17.0으로 업그레이드했다. 재택근무 중이라 팀원들과 화면 공유하며 작업했다.

주요 변경사항

1. 새로운 JSX Transform

React 17부터는 JSX 파일 상단에 import React from 'react'가 필수가 아니다.

// React 16 - import 필수
import React from 'react';

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

// React 17 - import 불필요
function Button() {
  return <button>Click</button>;
}

바벨 설정을 업데이트했다.

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

2. 이벤트 위임 변경

이전에는 document에 이벤트를 위임했는데, 이제는 React 트리의 루트 DOM 컨테이너에 위임한다. jQuery와 혼용하는 레거시 코드가 있어서 이 부분을 주의깊게 테스트했다.

3. 이벤트 풀링 제거

e.persist()를 호출하던 코드들을 제거했다. 더 이상 필요 없어졌다.

// Before
function handleChange(e) {
  e.persist();
  setTimeout(() => {
    console.log(e.target.value);
  }, 100);
}

// After - persist() 제거
function handleChange(e) {
  setTimeout(() => {
    console.log(e.target.value);
  }, 100);
}

마이그레이션 과정

  1. 패키지 업데이트: npm install react@17 react-dom@17
  2. ESLint 설정 수정
  3. 전체 코드베이스에서 e.persist() 제거
  4. QA 환경 배포 후 회귀 테스트

특별히 깨지는 부분은 없었다. React 팀이 호환성에 신경 많이 쓴 것 같다.

결론

React 17은 Breaking Change가 거의 없는 릴리스였다. 다음 메이저 업데이트를 위한 준비 단계로 보인다. 번들 사이즈도 약간 줄었다.

React 17 마이그레이션 작업 후기