간단한 React 15, 16, 17, 18 사항 정리

Maria Kim·2022년 3월 23일

16 전반

작아진 파일 사이즈 (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).
아무 DOM 노드에서 children을 렌더 할 수 있음
Return array & string 가능
에러 핸들링이 좋아짐
- 15에서는 런타임 에러나 잘못된 state를 recover 하기 위해서 페이지를 리프레쉬 해야 했음
- 컴포넌트는 constructor, render method 그리고 lifecycle methods에서 에러가 생기면 언마운트 되었음
- Error Boundary 가 나오면서 매번 컴포넌트를 언마운트하는 대신 에러를 잡고 대체 UI 를 보여줄 수 있게 되었음
  - componentDidCatch(error, info) 를 사용해서 에러처리(클라스 컴포넌트에서만 사용 가능)
새로운 Lifcecyle Methods
- 16 componentDidCatch
- 16.3 getDerivedStateFromProps (componentWillReceiveProps 대체)
- 16.3 getSnapshotBeforeUpdate (componentWillUpdate 대체)
React.StrictMode

16.2

16.8

17
새로운 기능은 없음. 리액트 자체 업그레이드

Lifecycle Methods 몇개 제거
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
16에서는 이벤트 들을 document.addEventListener()에 했지만 17에서는 rootNode.addEventListener() 로 설정됨
- 리액트가 아닌 코드와 합치는데 문제가 많았음
onScroll 버블링 없어짐
onFocus - focusing , onBlur -focusout 반영
캡쳐 이벤트들이 이제 진짜 캡쳐 페이스 리스너를 사용
Effect cleanup 이 언제나 비동기 적으로 작동
- 만약 컴포넌트가 언마운트하면, 화면이 업데이트되고 나서 cleanup 이 작돔됨
- 동기적으로 실행하고 싶다면 useLayoutEffect를 사용하면 됨
forwardRef와 memo 컴포넌트에도 undefined 가 리턴되면 에러로 잡힘
프로덕션 환경에서도 에러 발생 시 컴포넌트 스택을 추적할 수 있다.

<Suspense> 와 React.lazy 를 지원하는 새로운 서버 사이드 렌더링 아키텍처
ReactDOM.render() 대신 ReactDOM.createRoot() API가 사용됨
자동 배치(Automatic Batching) : 일반적인 이벤트 핸들러 함수 스코프에서 상태 업데이트가 발생하지 않더라도 자동으로 배치를 적용해 주는 것
- 자동 배치를 사용하기 위해서는 ReactDOM.createRoot 사용해야 함
- 배치 적용하지 않고 싶은 부분 - ReactDOM.flushSync 사용
- 배치(Batching) : 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링으로 묶는 작업
startTransition API를 사용하여 전환 업데이트를 명시적으로 구분하여 진행할 수 있게 됨

참고 사이트
https://medium.com/netscape/whats-new-in-react-16-1608390ffe39

Frontend Developer, who has business in mind.