개념 및 사용법

리액트가 18버전으로 업데이트 되면서 새로운 기능인 Transition 이라는 개념이 생겼다.

평소 리액트로 작업하다보면 이 컴포넌트는 유저의 반응에 대해 즉각적으로 반응을 해야하거나, 오히려 필요하지 않을때의 고민을 무조건 하게 된다.

여기서 Transition 은 즉각적인 반응이 필요하지 않은 상황을 구현하기 위한 새로운 기능이다.

리액트 V18 업데이트 문서에서의 예시를 우선 살펴보자.

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);
});

setInputValue 상태 업데이트는 유저의 입력에 의해서 갑자기 이루어진다.
이때 이를 응답해주는 searchQuery 는 지연을 부여해도 상관이 없는 상태 이다.

왜 그럴까 생각해보면 간단하다.

물론 상황에 따라 다르겠지만 일반적으로 우리가 검색이라는 기능을 이용할시 입력에 대한 한 글자가 변동될때마다 API를 호출한다고 하였을때

한글 이라는 검색어를 이용하여 검색한다고 가정하자. 순서는 아래와 같을 것이다.

1. ㅎ -> API 호출
2. 하 -> API 호출
   ...
3. 한글 -> API 호출

검색어에 대한 연관검색어를 얻기 위해 API 호출이 총 6번 일어난다. 이는 서버에 부담을 주는것 이다.

예시로는 한글 이라는 짧은 단어 이지만, 만약 길이가 20이 넘는 문장을 입력한다고 했을 시 횟수는 지금보다의 몇 배로 이루어질 것이다.

그래서 주로 이때는 상태 업데이트에 debounce 나 throttle 를 부여하여 가장 마지막의 입력을 상태로 업데이트 하고 API를 부여한다.

리액트에서는 그러한 방식도 좋은 방법이나 이번 버전에서 자체적으로 기능을 제공해주었다.

useTransition / startTransition

훅 방식과 함수 방식을 제공한다.

훅 방식은 isPending / startTransition 을 반환한다.

1. isPending : boolean 값 이며, 보류 상태 저장 값 / true 이면 로딩 UI 등 정보 컴포넌트 제공으로 사용
2. startTranstion : Transition을 시작하는 함수
   함수 내부안에 상태를 업데이트 하면 자동으로 Transition 처리를 해준다.
   업데이트 큐에서 후순위로 밀려서 업데이트 처리됨
   Transition이 적용된 코드는 즉각적인 입력이 있다면 중단된다.

2번의 내용이 잘 이해가 가지 않는다면 아래의 공식게시물을 참조하자.
useTransition 사용 예시 및 차이점

트러블 슈팅

Input onChange에 Transition을 사용하려는 문제 해결 방법