useTransition 언제 쓸까?

 

 

useTransition은 UI를 차단하지 않고 상태를 업데이트할 수 있는 React Hook이다.

 

---

 

Q. 여기서 UI를 차단하지 않는다는 것은 무슨 의미일까?

A. 사용자가 애플리케이션과 상호작용하는 동안 리액트가 비동기 작업이나 상태 업데이트를 처리하더라도, 인터페이스가 즉각적으로 반응할 수 있도록 보장한다는 의미이다. ( 출처:GPT )

 

 

예시로 아래와 같은 컴포넌트가 있다고 생각해보자.

위 예시는 Posts의 속도를 일부러 저하시킨 것이다.

Posts 버튼을 클릭하면 post 데이터를 불러와 렌더링한다. 이때 Contact 버튼을 클릭하면 일정 시간이 지난 후 동작한다.

즉, post 데이터를 전부 불러올 때 까지 화면이 멈추게 되고, 데이터를 전부 불러온 후 Contact 버튼이 활성화 된다.

 

 

 

왜 버튼이 바로 동작하지 않을까?

브라우저에서 리액트 코드가 실행되는 환경은 싱글 스레드(single-threaded)이기 때문에, 한 번에 하나의 작업만 처리할 수 있다. 이 말은, 먼저 발생한 작업을 모두 완료한 후에야 다음 작업으로 넘어갈 수 있다는 뜻이다.

위에서 Posts 버튼을 클릭하면, post 데이터를 불러오는 작업이 우선 실행되고 완료될 때까지 브라우저가 다른 작업을 차단하게 된다. 이로 인해 사용자가 Contact 버튼을 클릭하더라도, post 데이터가 모두 로드될 때까지 기다려야 한다.

리액트는 일반 상태 업데이트를 최우선으로 처리하기 때문에, 복잡한 작업이 실행 중일 때 다른 상호작용이 대기 상태에 들어가게 된다.

결과적으로 인터페이스가 즉각 반응하지 못하고 사용자 경험이 떨어지게 된다.

 

 

 

어떻게 해결하면 좋을까?

이와 같은 문제를 해결하기 위해 React에서는 useTrancition을 사용해 상태 업데이트를 비동기적으로 처리할 수 있다.

우선순위가 낮은 작업을 transition으로 분리하여 처리함으로써, 중요한 사용자 상호작용을 우선시하고 UI를 즉각적으로 반응하게 할 수 있다.

출처: 인프런 강의

React의 메인 스레드에서 작업하다가, 시간이 오래 걸리는 작업은 transition 스레드로 넘겨 처리하고, 사용자 상호작용이 발생하면 기존 작업을 멈추고 우선적으로 처리한다. 이를 통해 React는 긴 작업이 UI 응답성을 저해하지 않도록 관리한다.

 

헷갈리는 부분

• transition 스레드는 별도의 전용 스레드가 존재하는 것이 아니고 React 스레드에서 역할 분담으로 동작하는 개념이다.
• 단순히 우선순위를 조정하여 더 중요한 작업이 먼저 처리되도록 하는 것이다.

 

 

Transition 사용하기

...
const [deferredFilter, setDeferredFilter] = useState("");
const [isPending, startTransition] = useTransition();

const handleChange = ({target:{value}}) => {
  ...
  // 우선순위를 낮추기 위해 startTransition으로 래핑
    startTransition(() => {
        setDeferredFilter(value); // 변경된 값을 지연 상태로 설정
        })
};

return (<>
    // 처리가 필요한 곳에 지연된 값을 넣는다.
    <Words filter={deferredFilter}></Words> 

    // 지연되고 있다면 '로딩'이 뜬다.
    {isPending ? (<p>로딩</p>) : (<p>출력</p>)}

</>);

코드 설명

• startTransition으로 상태 업데이트를 래핑하여 이 작업의 우선순위를 낮춘다. 이를 통해 주요 UI 상호작용이 차단되지 않도록 유지할 수 있다.
• isPending 은 transition이 진행 중임를 나타내며, 이를 이용해 UI에 로딩 상태를 표시할 수 있다.

 

 

참고자료 : https://ko.react.dev/reference/react/useTransition