동시성 기능(concurrency feature)
- 이전 버전까지의 동기 렌더링 방식에서는 컴포넌트 트리 내의 모든 컴포넌트가 렌더링되고 DOM에 반영되기까지 반응이 없는 UI를 경험했다.
- 리액트 18 버전에서 도입된 동시성 기능으로 렌더링 과정을 일시 중지했다가 다시 시작하거나 아예 중단할 수 있게 되었다. 이로 인해 대규모 렌더링 작업이 진행되고 있더라도 사용자 입력에 대해 UI가 즉각적으로 반응할 수 있게 된다.
- 각 컴포넌트에 렌더링 우선순위를 부여해 낮은 우선순위의 컴포넌트가 렌더링되는 동안에는 더 중요한 작업이 있는지 확인해 중간에 렌더링을 일시 중단하고 다른 작업을 수행한 뒤 재개할 수 있다.
자동 배칭(automatic batching)
- 배칭이란 여러 개의 상태 업데이트를 하나의 재렌더링으로 그룹화해 처리하는 것이다.
- 리액트 버전 17에서는 이벤트 핸들러 내에서만 배칭이 이뤄졌다. 18버전부터는 모든 업데이트에 대해서 자동 배칭이 이뤄진다.
- 급한 업데이트와 그렇지 않은 업데이트를 구별하기 위해 transition이라는 개념이 새로 도입되었다. 타이핑, 클릭 등 사용자의 직접적 상호작용은 급한 업데이트에 해당한다. startTransition으로 래핑된 업데이트는 급하지 않은 업데이트로 처리되고 더 급한 업데이트가 발생하면 중단된다.
SSR 성능 개선
- HTML 스트리밍으로 로딩이 먼저 완료되는 HTML을 화면에 먼저 표시하고 로딩이 늦는 컴포넌트의 HTML은 나중에 별도로 삽입할 수 있다.
- 선택적 hydration으로 사용자가 먼저 상호작용하고자 하는 컴포넌트의 hydration을 우선적으로 수행할 수 있다.
suspense
- experimental 기능이었던 suspense가 정식 기능이 되었다.
- 기존에 코드스플리팅을 위해 suspense를 사용하는 것에 더해 18버전에서는 Relay, Next.js, Hydrogen, Remix 같은 프레임워크에서 데이터를 가져올 때도 suspense를 사용할 수 있다.
참고 자료
https://careerly.co.kr/comments/75599
https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022
https://react.dev/blog/2022/03/29/react-v18
번역: https://medium.com/@yujso66/번역-react-v18-0-9da9a6b838bd
https://vercel.com/blog/how-react-18-improves-application-performance
번역: https://velog.io/@sehyunny/how-react-18-improves-app-perf?utm_source=substack&utm_medium=email
'React' 카테고리의 다른 글
| client-side routing (0) | 2023.10.09 |
|---|---|
| [React] 리액트 앱에 인증 추가하기 (2) | 2023.05.01 |
| [React] 리액트 라우터 data api 사용하기 (0) | 2023.04.26 |
| [Redux] 비동기 작업 처리하기(useEffect, thunk) (0) | 2023.04.21 |
| [React] 리액트 성능 최적화: React.Memo, useCallback, useMemo (0) | 2023.04.18 |
