React useTransition으로 사용자 경험 개선하기: 부드러운 UI 업데이트

React useTransition 사용법과 예제 – 성능 최적화하기

useTransition

1. useTransition이란?

React 18에서 도입된 useTransition은 상태 업데이트를 우선 순위가 낮은 작업으로 처리할 수 있도록 도와주는 훅(Hook)입니다. 이를 활용하면 UI가 더 부드럽게 렌더링되며, 사용자가 입력하는 도중 렌더링으로 인해 인터페이스가 멈추는 문제를 방지할 수 있습니다.

✅ 주요 특징

• 상태 업데이트를 긴급한 작업과 덜 중요한 작업으로 분리
• 사용자의 입력이 즉각 반영되도록 유지하면서 무거운 연산을 백그라운드에서 실행
• 검색 필터링, 리스트 정렬 등과 같은 비동기 렌더링에서 유용

2. useTransition 기본 사용법

🔹 문법

const [isPending, startTransition] = useTransition();

• isPending: 현재 트랜지션이 진행 중인지 여부 (true | false)
• startTransition(callback): 낮은 우선순위 작업을 실행하는 함수

---

3. 실전 예제

🔹 기본 예제: 검색 필터 적용 시 렌더링 최적화

검색 입력이 변경될 때마다 필터링된 결과를 렌더링하는 과정에서, useTransition을 사용하여 사용자의 입력 반응성을 유지할 수 있습니다.

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

const names = Array.from({ length: 10000 }, (_, i) => `User ${i + 1}`);

const SearchComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredNames, setFilteredNames] = useState(names);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setSearchTerm(e.target.value);
    
    startTransition(() => {
      setFilteredNames(
        names.filter((name) => name.toLowerCase().includes(e.target.value.toLowerCase()))
      );
    });
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleChange} placeholder="Search..." />
      {isPending && <p>Loading...</p>}
      <ul>
        {filteredNames.slice(0, 20).map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

✅ 코드 설명

• startTransition 내부에서 필터링된 리스트를 업데이트하여 검색 입력이 즉각적으로 반영되도록 함
• isPending을 활용해 작업이 진행 중일 때 로딩 메시지를 표시
• 대량의 데이터 필터링에도 UI가 멈추지 않고 매끄럽게 동작

---

긴급하지 않은 상태 업데이트를 지연시켜 더 중요한 업데이트가 먼저 처리되도록 할 수 있습니다.

import { useTransition } from 'react';

function SearchComponent() {
  const [isPending, startTransition] = useTransition();
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const handleSearch = (e) => {
    // 즉시 업데이트되어야 하는 부분
    setSearchQuery(e.target.value);

    // 지연될 수 있는 무거운 업데이트
    startTransition(() => {
      setSearchResults(performSearch(e.target.value));
    });
  };

  return (
    <div>
      <input value={searchQuery} onChange={handleSearch} />
      {isPending ? (
        <div>검색 중...</div>
      ) : (
        <SearchResults results={searchResults} />
      )}
    </div>
  );
}

 

4. useTransition vs useDeferredValue

🔹 공통점

• 둘 다 React 18에서 도입된 성능 최적화 훅
• 긴급하지 않은 작업을 연기하여 UI 반응성을 향상시킴

🔹 차이점

	useTransition	useDeferredValue
사용 방식	상태 업데이트를 우선순위 낮은 작업으로 수행	특정 값의 변화를 지연시켜 UI의 즉각적인 반응 유지
적용 범위	비동기적 상태 업데이트	기존 상태를 유지하면서 최신 값 적용
활용 예시	리스트 필터링, 무거운 연산	검색어 입력, 자동완성 UI 최적화

 

✅ useTransition은 업데이트를 비동기적으로 실행하는 방식이고, useDeferredValue는 특정 값의 변화를 지연시키는 방식이라는 점에서 차이가 있습니다.

---

5. 언제 useTransition을 사용할까?

검색 기능	사용자가 입력하는 동안 UI가 멈추지 않도록 백그라운드에서 필터링 실행
대량 데이터 렌더링	긴 리스트를 렌더링할 때, 즉각적인 UI 업데이트 유지
정렬/필터 적용	리스트 정렬 시, 우선순위 낮은 작업으로 처리하여 사용자 경험 향상

❌ 사용하지 않는 것이 좋은 경우

• 상태 업데이트가 간단하고 빠르게 이루어지는 경우
• 즉각적인 데이터 반영이 필수적인 경우 (예: 실시간 채팅 입력)

---

6. 결론

🚀 useTransition을 활용하면 React 애플리케이션에서 사용자의 입력 반응성을 유지하면서 무거운 연산을 백그라운드에서 실행할 수 있습니다. 특히 검색 필터링, 대량 데이터 렌더링 등에서 큰 성능 향상을 경험할 수 있습니다.

 

🔑 핵심 정리

• useTransition은 긴급한 상태 업데이트와 그렇지 않은 상태 업데이트를 분리
• 무거운 연산을 낮은 우선순위로 실행하여 UI의 부드러움을 유지
• isPending을 활용해 진행 중인 작업을 사용자에게 피드백

React 18의 성능 최적화 기능을 활용해 더욱 부드러운 UI를 만들어 보세요.

 

https://ko.react.dev/reference/react/useTransition

useTransition – React