[React] useTransition

목차

1. useTransition이란

2. 사용법

---

useTransition

리액트 18에서 추가된 훅으로, nonblocking방식으로 상태(state)를 업데이트 할 수 있게 해주는 훅입니다.

 

nonblocking 방식이란?

기존 리액트는 block 방식으로 상태를 업데이트하면 렌더링 작업이 실행됩니다. 해당 렌더링이 발생할때 사용자가의 인터렉션 처리가 지연되어 화면에서 버벅임과 같은 현상이 발생하게 됩니다.

하지만, nonblocking 방식을 사용하게 된다면, 상태 업데이트를 낮은 우선순위로 낮추어 사용자의 인터렉션이 먼저 처리되고 이후에 상태가 업데이트되어 렌더링되도록 합니다.

그 결과 버벅임과 같은 인터렉션 지연을 방지할 수 있게 됩니다.

 

인터렉션

시스템 환경과 사용자 간의 상호작용

ex) 키보드 입력, 마우스 클릭 등..

 

즉, useTransition은 특정 상태 업데이트의 우선순위를 낮추어 사용자 인터렉션을 우선 순위로 처리하게 합니다.

가벼운 작업(버튼 클릭, 필드 타이핑)이 무거운 작업(목록 필터링, 차트 업데이트)보다 먼저 실행됨으로써, 사용자의 UI 사용성 개선을 도와줍니다.

---

사용법

import React, { useState, useTransition } from 'react';

const [isPending, startTransition] = useTransition();

startTransition(() => {
  // 우선순위가 낮은 상태 업데이트
  setSomeState(data);
});

//isPending: 현재 transition 중인 상태(true, false)
//startTransition: 작업 수행 함수

 

isPending은 현재 트랜지션의 상태를 나타내고 startTransition은 작업을 수행하는 함수 입니다.

 

우선순위를 낮출 작업(함수)을 startTransition 내부에서 호출되게 하면됩니다.

 

---

예시

참고한 블로그의 예시를 인용하였습니다.

키워드 입력시 대용량 리스트를 필터링해서 보여주는 예시입니다.

import React, { useState, useTransition } from 'react';

type Item = {
    id: number,
    label: string
}

const largeList: Item[] = [...Array(1000000)].map((_, i) => ({
    id: i,
    label: `Item ${i}`,
}));

export default function TransitionHook() {
    const [input, setInput] = useState('');
    const [filteredList, setFilteredList] = useState([]);
    const [isPending, startTransition] = useTransition();

    const handleChange = (e) => {
        const keyword = e.target.value;
        setInput(keyword);

        startTransition(() => {
            const filtered = largeList.filter(item =>
                item.label.toLowerCase().includes(keyword.toLowerCase())
            );
            setFilteredList(filtered);
        });
    };

    return (
        <div>
            <input value={input} onChange={handleChange} />
            {isPending && <p>검색 중...</p>}
            <ul>
                {filteredList.map((item:Item) => <li key={item.id}>{item.label}</li>)}
            </ul>
        </div>
    );
}

 

 

동작 흐름

1. 키워드 입력시 상태 input을 업데이트
2. startTransition이 시작되면서 배열 필터가 수행되고 상태 filteredList업데이트는 나중에 처리됨
3. isPending이 true 동안 검색중이라는 화면을 UI에 노출시킴
4. 우선순위가 낮은 필터링 작업이 완료되면 상태 filteredList 업데이트와 isPending이 false로 변경
5. 렌더링되면서 검색 중은 노출되지 않고 filteredList가 노출되어 나와짐

 

 

중요 포인트

• 동시성
  • isPending=false와 업데이트 된 filteredList가 화면에 노출되는 순간은 동일한 렌더링 주기에 발생
• 화면 끊김 방지
  • 키보드 입력시 largeList를 필터링 하는 동안 스레드가 점유되어 글자를 입력해도 입력창에 글자가 바로 나타나지 않는 버벅임 발생
  • 트랜지션의 백그라운드 작업 진행중에 사용자가 키보드를 다시 입력하면 진행중이던 작업을 중단하고 새로운 입력을 처리하기 때문에 UI가 멈추지 않음
• isPending 역할
  • 키보드 입력시 반응이 없는 것이 아니라, 검색중이라는 것을 알려주기 위한 시각적 피드백

---

참고

https://codeno-te.tistory.com/252

React의 useTransition 가이드 정리, 동작 흐름 확인해보기

https://jaeano.tistory.com/entry/React-useTransition-Concurrent-Mode-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

[React] useTransition, Concurrent Mode 쉽게 이해하기