React 19 useTransition을 활용한 Axios 데이터 로딩과 상태 업데이트

useTransition 은 시간이 걸리는 비동기 작업(예: 데이터 요청, 상태 업데이트)을 낮은 우선순위로 처리하여 UI가 멈추지 않고 계속 반응하여 사용자 경험을 향상시킬 수 있습니다.

예제 코드: useTransition을 사용한 비동기 상태 업데이트

1. App.jsx

//App.jsx
import { useState, useTransition } from "react";
import Employees from "./Employees.jsx";

function App() {
  const [id, setId] = useState(0);

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <div className="max-w-3xl mx-auto bg-white shadow-lg rounded-lg p-6">
        <h1 className="text-2xl font-bold text-center mb-4">부서 검색</h1>
        <div className="flex gap-2 mb-6">
          <input
            type="number"
            placeholder="부서 ID를 입력하세요"
            className="flex-1 border border-gray-300 rounded-md px-3 py-2"
            value={id}
            onChange={(e) => setId(Number(e.target.value))}
          />
        </div>
        <div>
          <Employees id={id} />
        </div>

        {id === 0 && (
          <p className="text-red-500 text-center">
            해당 부서를 찾을 수 없습니다.
          </p>
        )}
      </div>
    </div>
  );
}

export default App;

왜 useTransition 두 번 사용했는가?

• 한 번 : 서버 요청이 오래 걸릴 경우, 요청 중간에 발생한 모든 상태 변경이 순차적으로 UI에 반영되면서 깜박일 수 있습니다.
• 두 번 : 요청 중간에 상태 변경이 UI에 반영되지 않고, 마지막 요청 결과만 UI에 반영되므로 여러 번 요청이 발생하거나 서버 요청이 오래 걸리는 경우 더 안정적이고 UI가 깔끔하게 유지됩니다.

2. Emplyees.jsx

//Emplyees.jsx
import { useState, useTransition } from "react";
import { axios } from "./axios.js";

function Employees({ id }) {
  const [empList, setEmpList] = useState([]);
  const [isPending, startTransition] = useTransition();

  if (id === 0) return null;

  const handleSubmit = () => {
    startTransition(async () => {
      try {
        const data = await fetchData(id);
        startTransition(() => {
          setEmpList(data);
        });
      } catch (err) {
        console.log(err);
      }
    });
  };
  
  return (
    <div>
      <button onClick={handleSubmit} disabled={isPending}>
        {isPending ? "Loading..." : "Update"}
      </button>
      <ul>
        {empList.map((employee) => (
          <li key={employee.employeeId}>{employee.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Employees;

const fetchData = async (id) => {
  const response = await axios.get(`/employees/${id}`);
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return response.data.employees;
};