React Suspense와 use로 빈 데이터 문제 해결하기

부모 컴포넌트가 서버 데이터를 요청하고 이를 자식 컴포넌트로 내려주는 경우, 데이터가 로드되기 전에 자식 컴포넌트가 빈 상태나 기본값으로 렌더링될 수 있습니다.
이는 불필요한 useEffect 사용이나, 자식 컴포넌트에서 동일 데이터를 다시 요청해야 하는 비효율적인 상황을 초래합니다.

 

Suspense와 use를 활용하면, 데이터가 준비될 때까지 로딩 컴포넌트를 표시하고, 데이터를 수신한 후에 자식 컴포넌트를 렌더링하는 방식으로 이 문제를 해결할 수 있습니다.

Suspense란?

비동기 데이터가 로드될 때까지 컴포넌트 렌더링을 일시 중단하고, 로딩 중임을 표시하는 UI를 보여주는 기능입니다. fallback 속성은 로딩 중에 보여줄 컴포넌트를 지정합니다.

use란?

Promise를 처리하고 데이터를 동기적으로 사용하는 것처럼 표현할 수 있는 훅입니다. 이를 통해 데이터가 준비될 때까지 렌더링을 일시 중단하며, 데이터가 준비되면 자동으로 컴포넌트를 다시 렌더링합니다. useEffect나 상태 관리 없이도 데이터를 쉽게 사용할 수 있습니다.

1. 예제

App.jsx

import React, { Suspense } from "react";
import EmployeeList from "./EmployeeList";

async function App() {
	const employeeData = await axios.get('employee');

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <h1 className="text-2xl font-bold text-center mb-4">Employee List</h1>
      <Suspense fallback={<p>Loading employees...</p>}>
        <EmployeeList data={employeeData} />
      </Suspense>
    </div>
  );
}

export default App;

변경 EmployeeList.jsx

import React from "react";
import { use } from "react";

function EmployeeList({ data }) {
  const employees = use(data);

  return (
    <ul>
      {employees.map((employee) => (
        <li key={employee.id}>{employee.name}</li>
      ))}
    </ul>
  );
}

export default EmployeeList;

기존 EmployeeList.jsx

import React, { useState, useEffect } from "react";
import { use } from "react";

function EmployeeList({ data }) {
  const [employeeList, setEmployeeList] = useState([]);

	useEffect(() => {
		setEmployeeList(data);
	}, [data])
	
  return (
    <ul>
      {employees.map((employee) => (
        <li key={employee.id}>{employee.name}</li>
      ))}
    </ul>
  );
}

export default EmployeeList;

use와 Suspense는 비동기 데이터 로드를 자연스럽게 관리하며, 기존의 복잡한 로직(useEffect 등)을 단순화합니다. 이를 통해 더 직관적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.