startTransition 개념 배우기

by

React18 버전에서 가장 강조된 키워드는 동시성이다. JavaScript는 단일 스레드 언어이므로 한 번에 하나의 작업만 처리할 수 있습니다. 화면이 오랫동안 멈추면 사용자 경험이 악화되기 때문에 웹 개발에 큰 장애가 된다. React는 렌더링 블록 문제 해결하기 위해 동시성을 이용하게 되었다.

개념

이 기능은 상태 업데이트를 수행 할 때 우선 순위를 결정하는 데 도움이됩니다. 리액트에서는 상태 갱신 대상을 2개로 나누어, 이것에 의해, transition이 무엇을 의미하는지를 파악할 수 있다.

  1. Urgent updates(높은 우선순위) : 버튼 클릭, 키보드 입력 등 직관적으로 볼 때 업데이트가 즉시 발생하는 것기대하는 상태 값
  2. Transition updates(낮은 우선순위) : 사용자가 상태 값 변경과 관련된 모든 업데이트가 뷰에 즉시 발생하기를 기대하지 않습니다.
  3. • load(로드) transition, refresh(리프레시) transition

예

검색 사이트에서 auto complete 기능이나 검색 필터링 기능을 사용하면 검색한 결과 값을 사용하여 상태를 갱신하기 위해 다음과 같은 코드를 작성한다.

'추천 관련글,

검색 결과 목록이 매우 길거나 많을 경우에도 사이트에서 검색 결과 값을 가지고 내부적으로 복잡한 작업을 진행할 수 있다. 유저의 이벤트치가 약간이라도 바뀌어도, 페이지 UI에 큰 변화를 일으킨다. 이 때 발생하는 렉을 최적화하는 방법은 없다.

// show what was typed
setInputValue(input);
 // show results
setSearchQuery(input);

검색을 할 때, 사용자는 키보드 입력이 즉시 일어날 것으로 기대하지만, 결과 윈도우에의 렌더링이 곧바로 일어날 것이라고는 생각하지 않는다. startTransition은 이러한 사용자의 심리를 이용한 사양이다.

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

우선 순위에 따라 작업을 분리하고 높은 우선 순위 작업 (키보드 입력)을 코드 위에 놓고 즉시 렌더링에 반영합니다. 그리고 낮은 우선 순위의 작업(결과 윈도우)은 startTransition에 넣어 갱신을 지연시켜 둔다. 그러면 키 입력이 끝난 후 결과 창이 업데이트됩니다.

  • searchQuery 상태 업데이트가 진행되는 동안 inputValue 상태 업데이트가 발생하면 잠시 중단되고 inputValue 상태 업데이트가 완료되면 searchQuery 상태 업데이트가 완료됩니다.
  • debounce를 활용하지 않고 기기 성능에 따라 최적화가 가능해진다.
  • 기존 디바운스/스로틀링은 setTimeout을 활용하여 특정 시간을 아무거나 기다려야 했다.

사용자에게 전환 업데이트가 백그라운드에서 진행됨을 알리고 싶을 때 useTransition 후크를 사용하여같은 UI를 표시할 수 있다.

import { useTransition } from 'react';

const (isPending, startTransition) = useTransition();
...
{isPending && <Spinner />}
...

메커니즘

자동 완성을 구현하려면 debounce 기능을 사용합니다. debounce에는 setTimeout을 사용합니다.

  • yielding: 렌더링 프로세스를 작게 분할하고 일시 중지할 수 있습니다(중요한 내용 양보)
  • interrupting: 동시성 모드에서 업데이트에 우선순위가 있음
  • 이전 결과 건너뛰기: 현재 상태만 반영하도록 중간 상태 반영을 건너뜁니다.필요한 최종 상태만 반영

setTimeout과 어떻게 다른

  • setTimeout에서 대기열에 넣은 작업은 들어오는 순서로 처리되며 취소할 수 없습니다.
  • 이전 결과는 건너뛸 수 없습니다.

startTransition은 크게 리렉트가 UI 업데이트를 위해 크게 복잡한 일을 함으로써 대기 시간이 발생하거나 느린 네트워크 환경에서 데이터를 받는 것을 기다리는 상황에서 사용한다고 한다.

아래 사이트를 참고하여 문장을 만들었습니다.

https://velog.io/@woodong/React-18-메인-변경점

https://student513.tistory.com/90

https://velog.io/@jay/React-18-변경점