React 18) Transition

0. Transition

브라우저에서 렌더링이 시작되면 중단될 수 없으며 렌더링이 완료되기까지 화면은 block 상태가 된다고 할 수 있다. 이로 인하여 렌더링 도중에 발생하는 텍스트 입력과 마우스 클릭과 같은 액션이 지연되어 버벅거림을 느낀 적이 있을 것이다. 화면이 오래 멈춰있다면 사용자 경험은 악화되기 때문에, React 18에서는 렌더링 블록킹 문제를 해결하기 위해 동시성을 이용하게 되었다.

 

🔸startTransition

작업 단위를 잘게 나누어 실행하되, 우선순위가 높은 작업등을 먼저 렌더링하고 우선순위가 낮은 작업은 잘게 나누어진 단위에서 블록시킨다.

 

예를 들면 검색창에 검색을 할 경우 키보드 입력에 따라 추천 검색어가 뜬다. 키보드 입력이 한 번 발생할 때마다 입력된 키워드에 대해 관련된 단어들에 대한 데이터를 요청하여 매번 새롭게 렌더링을 해야하는데,네이버 같이 방대한 데이터베이스를 가진 검색엔진의 경우 엄청난 부하가 걸릴 수 밖에 없다. 다행히도 사용자는 키보드 입력은 즉시 일어날 것으로 기대하지만, 추천 검색어에 대한 렌더링이 즉시 일어날 것이라고는 기대하지 않는다

 

- 긴급한 업데이트 (urgent updates) : 입력, 클릭, 누르기 같은 다이렉트 상호작용을 반영
- 전환 업데이트 (transition updates) : UI의 전환

 

타이핑, 클릭, 누르기 같은 긴급 업데이트는 빠르게 업데이트 되지 않으면 버벅거리면서 앱이 이상하다는 느낌을 줄 수 있다. 하지만 화면은 곧바로 결과값을 볼거라고 기대하지 않기 때문에 전환 업데이트는 느리게 업데이트가 되어도 괜찮다.

import { startTransition } from 'react';

// 긴급한 업데이트 : 입력하고 있는 값
setInputValue(input);

// startTransition으로 래핑된 업데이트는 긴급하지 않은 것으로 처리되고, 더 긴급한 업데이트가 들어오면 중단된다.
startTransition(() => {
  // 전환 업데이트: 입력값에 따른 쿼리값
  setSearchQuery(input);
});

위와 같이 startTransition으로 래핑된 업데이트는 전환 업데이트로 처리되며, 긴급한 업데이트가 들어오면 중단된다. 즉, 우선순위에 따른 작업(키보드 입력)은 즉각 렌더링에 반영하고, 낮은 우선순위의 작업(추천 검색어) 는 렌더링을 지연시켜 최종상태(입력이 완료된 단어에 대한 추천 검색어) 만 반영한다.

// 보류중 여부를 나타내는 변수와 함께 훅으로도 사용할 수 있다.
const [isPending, startTransition] = useTransition();

// 훅을 사용할 수 없다면 startTransition() 함수를 사용할 수 있다.
import { startTransition } from 'react';

 

🔸startTransition vs Debounce vs Throttle

 

 

---

 

참고자료

https://student513.tistory.com/90

React 18 startTransition, selective hydration, Automatic Batching

https://yrnana.dev/post/2022-04-12-react-18/

React 18 둘러보기 | nana.log