[React] react 16에서 17로 업그레이드 하기

요약

• 운영중인 커머스어드민과 판매자센터의 React 버전을 올리는 리팩토링을 맡게 되었음
• 결과적으로 버전을 올리지 못했음
  • React 버전을 올리는 게 문제가 된 것이 아니라 TypeScript 버전도 함께 올려야 하는 이슈가 발생
  • 거의 모든 파일을 수정해야 하고 기존 3.7.5 버전에서 발생하고 있던 오류(동작하기에 고치지 않고 넘어갔던..)들이 대폭발 💣
  • 혼자서 감당할 수 없었고 모든 기능들을 재검수할만큼의 자원이 없었음
  • 협의 하에 Cancelled

 

React 16 / 17

v16

• return Array & string 가능
• Error Boundaries
  • componentDidCatch 를 통해 에러 대응(클래스 컴포넌트에서만 사용 가능)
• 작아진 파일 사이즈 (32% 감소)
  • react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
  • react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
  • react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).
• Fragment 지원
• StrictMode
  • 개발 환경에서만 실행되며 프로덕션에는 영향이 없음
• 새로운 생명주기 추가
  • getDerivedStateFromProps (componentWillReceiveProps 대체)
  • getSnapshotBeforeUpdate (componentWillUpdate 대체)
• 16.8.0 hook

v17

• 생명주기 일부 제거
  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate
• 16에서는 이벤트들을 document.addEventListener()로 수행했지만 17에서는 rootNode.addEventListener()를 호출함
• New JSX Transform
  • react → react/jsx-runtime
  • TypeScript supports the new JSX transform in v4.1 and up.
• onFocus(focusing), onBlur(focusout) 반영

 

⚡ React 16 → 17

• package.json 수정

"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3"

"react": "^17.0.2",
"react-dom": "^17.0.2",

 

• tsconfig.json 수정

// before
// <div /> -> React.createElement("div")
"jsx": "react"

// after
// <div /> -> _jsx("div", {}, void 0);
"jsx": "react-jsx"

 

New JSX Transform

old transform

// source code
import React from "react"
function App() {
  return <h1>Hello World</h1>
}

// compiled code
import React from "react"
function App() {
  return React.createElement("h1", null, "Hello world")
}

new transform

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

// compiled code
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
  return _jsx('h1', { children: 'Hello world' });
}

• JSX 변환을 처리할 때 더이상 React.createElement 로 변환하지 않고 react 패키지 자체의 함수를 불러와서 동작하게 함
• 장점은 아래와 같다.
  • JSX 관련 import가 필요하지 않음
  • 컴파일된 번들 최종 크기가 약간 줄어듦
  • React가 다른 버전으로 여러번 중복으로 설치되는 경우를 방지할 수 있음

 

⚠️ 에러가 발생한다면? (TypeScript)

• TypeScript는 new JSX transform을 v4.1 이상부터 지원하기 때문에 v.4.1 미만 버전을 사용하고 있다면 필히 버전을 올려줄 것!

 

참고

https://ko.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html