- React 18의 새로운 기능을 사용하려면 createRoot API를 사용해야 함
- 첫 번째 새로운 기능은 Automatic batching
- Automatic Batching은 여러 상태 업데이트(setState)를 통합하여 단일 리렌더링으로 처리하여 성능을 개선하는 기능
- 이전 버전에서는 이벤트 핸들러와 생명주기 메소드를 사용할 때만 배치를 지원했지만 콜백함수가 포함된 경우 지원하지 않았음
- react-dom의 내장 함수인 flushSync()를 사용하면 배치처리를 사용하지 않을 수 있음
- 두 번째 기능은 Suspense 이 부분 100% 이해 하지 못한듯. 다시보기
- Suspense를 사용하지 않으면 로딩이 모두 될 때 까지 기다려야 함. 하지만 Suspense를 사용하면(렌더링 할 컴포넌트를 Suspense로 감싼 후, 컴포넌트가 렌더링 되기 전에 보여주길 원하는 컴포넌트를 fallback으로 지정) 초기 렌더링 페이지를 전체가 아닌 빠르게 준비되는 부분부터 보여주기 때문에 초기 렌더링 속도가 감소.
- 또한 코드를 간결하게 만들어주고 가독성이 좋아짐.
- SSR 렌더링 방식에서 Suspense를 사용하지 않으면 사용자가 빈 화면만 보는 상황이 발생할 수 있음.
- 세 번째 기능은 Transitions
- 새롭게 생긴 Hook으로 상태 업데이트에 대한 우선순위를 설정
- 네 번째 기능은 New Hooks
- useId
- useDeferredValue
Reference
기록을 통한 성장