15
- 컴포넌트의 루트는 한 개만 허용 -> 컴포넌트 감싸주는 컴포넌트가 종종 생겼다 (이를 16.2에서 <></>가 나오며 해결)
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 가 리턴되면 에러로 잡힘
- 프로덕션 환경에서도 에러 발생 시 컴포넌트 스택을 추적할 수 있다.
18
<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
16
https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67
17
https://reactjs.org/blog/2020/08/10/react-v17-rc.html
https://han7096.medium.com/react-v17-release-candidate-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0-6a4b091965c4
18
https://medium.com/naver-place-dev/react-18%EC%9D%84-%EC%A4%80%EB%B9%84%ED%95%98%EC%84%B8%EC%9A%94-8603c36ddb25