useTransition

 

🎯 useTransition이란 무엇일까요?

**useTransition**은 **"사용자 인터랙션(버튼 클릭, 입력 등)과 무거운 작업(화면 렌더링)을 나눠서 처리하는 도구"**예요.

조금 더 쉽게 말하면:

• 사용자가 어떤 동작(예: 검색, 버튼 클릭)을 했을 때 빠르게 반응하는 부분과
• 그 동작 이후에 화면을 천천히 렌더링해야 하는 부분을 나누어서 처리합니다.

 

🐌 왜 useTransition이 필요할까요?

상상해보세요. 여러분이 검색창에 글자를 입력하고 있어요. 🔍
입력할 때마다 화면에 결과가 빠르게 업데이트되면 좋겠죠? 하지만 결과가 복잡하고 많아서 화면이 버벅거리거나 느려진다면 사용자는 불편해질 거예요.

useTransition을 사용하면:

1. 입력이나 클릭과 같은 동작은 즉시 반응하고,
2. 화면에 복잡한 결과를 렌더링하는 작업은 "조금 나중에" 여유 있게 처리합니다.

이렇게 하면 사용자 경험이 훨씬 부드러워져요! 🎉

 

🛠️ useTransition 기본 사용법

간단한 검색창 예제를 통해 useTransition을 어떻게 사용하는지 살펴볼게요.

 

1. useTransition 코드 예제

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

function SearchList() {
  const [input, setInput] = useState(""); // 입력값 상태
  const [searchResults, setSearchResults] = useState([]); // 검색 결과 상태
  const [isPending, startTransition] = useTransition(); // useTransition 사용

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

    // 화면 업데이트를 나중으로 미루기
    startTransition(() => {
      const results = [];
      for (let i = 0; i < 10000; i++) {
        results.push(`결과 ${value} - ${i}`);
      }
      setSearchResults(results); // 결과를 업데이트
    });
  };

  return (
    <div>
      <h3>useTransition 예제</h3>
      <input
        type="text"
        placeholder="검색어를 입력하세요"
        value={input}
        onChange={handleSearch}
      />
      {isPending && <p>결과를 불러오는 중...</p>} {/* 진행 중 표시 */}
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchList;

 

🔍 코드 설명

1. useTransition으로 상태 나누기

const [isPending, startTransition] = useTransition();

 

• isPending: 화면 업데이트가 진행 중인지 확인하는 값이에요.
• startTransition: 화면 업데이트를 여유롭게 처리하도록 도와주는 함수입니다.

2. startTransition 사용

startTransition(() => {
  const results = [];
  for (let i = 0; i < 10000; i++) {
    results.push(`결과 ${value} - ${i}`);
  }
  setSearchResults(results);
});

 

 

• 입력값이 바뀌면 startTransition 안에서 **무거운 작업(대량의 검색 결과 생성)**을 처리해요.
• 이렇게 하면 입력값은 빠르게 업데이트되고, 화면 렌더링은 조금 여유 있게 처리됩니다.

3. isPending로 로딩 표시

• isPending 값이 true일 때는 **"결과를 불러오는 중..."**과 같은 로딩 화면을 보여줄 수 있어요.

 

⚡ useTransition을 사용했을 때의 장점

1. 입력이나 클릭은 즉각 반응
   • 사용자의 입력이 화면에 빠르게 반영됩니다.
2. 복잡한 작업은 여유롭게 처리
   • 무거운 계산이나 렌더링 작업은 다른 작업이 끝난 후에 처리되니까 화면이 버벅이지 않아요.
3. 사용자 경험(UX) 향상
   • 느린 작업 때문에 입력이 지연되지 않고 부드럽게 작동합니다.

 

🧩 useTransition을 언제 사용할까요?

• 검색 기능: 입력값에 따라 결과가 많아질 때 화면이 버벅거리지 않도록 처리하고 싶을 때.
• 리스트 렌더링: 대량의 데이터를 화면에 표시해야 할 때.
• 사용자 입력과 복잡한 작업이 동시에 일어날 때: 입력은 즉시 처리하되, 렌더링은 나중에 천천히 처리하고 싶을 때.

 

🌟 정리하자면!

useTransition은 사용자의 빠른 동작(입력, 클릭 등)과 무거운 작업(화면 렌더링)을 나눠서 처리해주는 훅이에요.
사용자 입력은 즉시 반응하고, 복잡한 렌더링은 조금 나중에 처리해서 화면이 부드럽게 동작하도록 도와줍니다. 🚀