React에서의 transition
상태 업데이트할 때 우선순위를 정하는데 도움을 준다. 리액트팀은 상태 업데이트 대상을 두 가지로 분류를 했다.
- Urgent updates: 버튼 클릭, 키보드 입력과 같이 직관적으로 보았을 때 업데이트가 즉각적으로 일어나는 것을 기대하는 상태 값들.
- Transition updates: 사용자가 상태 값의 변화에 따른 모든 업데이트가 뷰에 즉각적으로 일어나는 것을 기대하지 않을때.
어떤 문제를 해결하는가?
타이핑과 같이 빈번하게 일어나는 이벤트에 따라 큰 화면이 업데이트가 된다면 일어나는 리렌더링이 해당 화면에 렉을 일으키거나 스무스한 UI를 제공하지 못한다.
보통 검색에서 auto complete 기능이나 검색 필터링을 사용하고자 하면 검색한 결과값을 갱신해주는 코드를 작성한다.
// show what was typed
setInputValue(input);
// show results
setSearchQuery(input);페이지에서 사용자의 타이핑에 따라 화면이 달라지는 부분은 크게 입력 폼과 결과 창이다.
입력 창은 유저는 타이핑이 입력창에 즉각적으로 반영되기를 기대.
결과 창은 직관적으로 어디에서 검색 결과를 가져오는 작업을 하는 공간으로 느껴지기에 입력 창보다 UI 업데이트가 느린 것에 대해 자연스럽게 받아들여진다.
// Urgent: Show what was typed
setInputValue(input);
// Not urgent: Show the results
setSearchQuery(input);입력 창과 결과 창에 사용하는 상태 값은 항상 동일한 시간에 업데이트.
지금까지는 리액트가 모든 상태 업데이트의 우선순위를 동일하게 처리하였기 때문에 사람이 기대하는 것에 맞춰서 뷰의 각 부분에 세밀하게 우선순위를 주어 렌더링하는 것이 매우 어려웠다.
useTransition
리액트 18에서 나온 useTransition을 통해 각 상태 업데이트에 대한 우선순위를 지정할 수 있다.
기존에 사용자 경험을 개선하기위해 사용했던 디바운스 / 쓰로틀링 / setTimeout등의 기능을 지원한다.
import { useTransition } from 'react';
const [isPending, startTransition] = useTransition();
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setSearchQuery(input);
});startTransition으로 둘러싸인 부분은 클릭이나 키 입력에 의해 우선순위가 높은 상태 업데이트가 발생하게 되면 렌더링 업데이트가 중단되고 키 입력이 완료된 후의 업데이트만 발생하게 된다.
트랜지션이 진행중이라는것을 표시하고싶을땐 isPending을 이용해서 로딩 컴포넌트를 호출할 수도 있다.
useDeferredValue
useTransition는 콜백 함수의 우선순위를 낮게 한다.
이와 다르게 state 값의 우선순위를 낮게 해준다.
import { useState, useDeferredValue } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// ...
}