React v18

 

new Root API

• 이전에는 Root Container에 변화가 없더라도, 새로 랜더링하기 위해 Root를 반드시 체크했어야만 했다.
• 위 과정이 무의미하다고 판단하여 새로운 Root API를 생성함.
• 매번 Root를 체크하지 않음.
• 새로운 Root API에는 Callback이 제거되었는데, hydration, SSR 과 함께 Callback을 사용하면 타이밍이 개발자의 생각과 다르게 작동할 수 있기 때문이다.

automatic batching

• 더 나은 랜더링 성능을 위해 state 업데이트를 하나로 그룹화 하는 것을 의미한다.
• 모든 state 업데이트는 리액트에서 발생하는 이벤트 내부의 업데이트와 동일한 방식으로 처리하여 랜더링 횟 수를 최소화 함.
• automatic batching을 원하지 않는 경우, ReactDom.flusySync() 함수를 사용하면 된다.

Transition

• state를 업데이트하는 우선순위를 지정할 수 있음.
• Transition API를 활용하기 위해서는 new Root API를 사용해야함.
• useTransition Hook을 사용하여 Transition을 쉽게 사용할 수 있음
  • isPending
    • Transition이 진행중인지 여부를 나타냄
    • 이를 통해 사용자들에게 화면 로딩 중, 데이터 업데이트 여부를 전달할 수 있음
  • startTransition
    • startTransition 함수 내부에서 state 업데이트를 진행하면, 우선순위 큐 내부에서 뒤로 밀려 업데이트가 진행됨.

 

 

React 18 버전의 실상을 파헤치다. - 오픈소스컨설팅 테크블로그 %