[React] 데이터 로딩 전략의 모든 것 🛠️

데이터 로딩 전략의 모든 것 톺아보기 🛠️

React 앱을 개발하다 보면 데이터를 로드하는 과정에서 다양한 접근 방식을 고민하게 됩니다.
데이터 로딩 전략은 사용자 경험, 성능, 유지 보수성에 큰 영향을 미치므로 신중하게 선택해야 합니다!
 
오늘은 “Fetch on Render”, “Fetch then Render”, 그리고 “Render as You Fetch”라는 세 가지 데이터 로딩 전략을 파헤쳐 보려고 합니다.

---

🌟 1. Fetch on Render

🧐 무엇인가요?

"Fetch on Render" 전략은 컴포넌트가 렌더링될 때 API를 호출하여 데이터를 가져오는 방식입니다.
이 방법은 React의 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 로드합니다.
 
가장 기본적인 접근법으로, 다음과 같이 동작합니다:
1. 컴포넌트 렌더링 → 2. 데이터 요청 → 3. 데이터 표시

💻 코드 예제

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

function FetchOnRender() {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((response) => response.json())
      .then((result) => setData(result));
  }, []);
  
  if (!data) return <p>Loading...</p>;
  return <div>{data.title}</div>;
}

✅  장점

• 간단한 구현: 데이터 로딩이 컴포넌트 내부에서 직접 이뤄져서 코드가 간결해집니다.
• React 생명주기와의 일관성: 데이터 요청이 컴포넌트 렌더링과 맞물려 진행됩니다.
• 유연성: 컴포넌트 상태에 따라 API 호출 조정이 쉽게 가능합니다.

❌ 단점

• 느린 초기 렌더링: 렌더링 후 데이터를 가져오기 때문에 로딩 화면이나 빈 콘텐츠가 표시될 수 있습니다. 따라서 데이터가 로드되기 까지 사용자가 보게되는 UI가 제한적입니다.
• 중복 요청: 동일한 데이터를 여러 컴포넌트가 필요로 하면 중복 요청이 발생할 수 있습니다.
• 의존성 문제: 여러 컴포넌트에서 데이터를 로드하는 경우, 데이터 의존성을 관리하기 어려울 수 있습니다.
• 네트워크 지연: 데이터 요청이 항상 초기 렌더링 이후에 시작됩니다.

⚠️ 유의할 점

• 데이터 로딩 중 로딩 스피너 또는 플레이스홀더를 표시하여 사용자에게 피드백을 제공하는 것이 중요합니다.
• API 호출이 실패할 경우 에러 핸들링을 고려해야 합니다.

---

🌟 2. Fetch then Render

🧐 무엇인가요?

"Fetch then Render" 전략은 데이터를 먼저 요청하고, API에서 가져온 후, 데이터를 기반으로 컴포넌트를 렌더링하는 방식입니다.
일반적으로, 데이터가 완전히 로드된 후에 컴포넌트를 렌더링합니다. 주로 서버 상태 관리 라이브러리나 고급 패턴에서 자주 사용됩니다.

💻 코드 예제

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

function FetchThenRender() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/data")
      .then((response) => response.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, []);

  if (loading) return null; // 초기 렌더링 없이 대기
  return <div>{data.title}</div>;
}

✅ 장점

• 초기 렌더링 최적화: 데이터를 모두 가져온 후 렌더링하므로,  빈 상태나 로딩 상태가 아닌, 완전한 UI를 제공합니다.
• 중복 요청 감소: 데이터 로직을 중앙화하여 동일 데이터를 공유하는 컴포넌트 간의 중복 요청을 방지할 수 있습니다.
• 데이터 일관성: 모든 데이터가 준비된 상태에서 렌더링되므로 데이터의 일관성이 유지됩니다.
• 로딩 상태 관리가 쉬움: 데이터 요청이 완료된 시점에만 UI가 렌더링됩니다.

❌ 단점

• 초기 로딩 지연: 데이터가 로드될 때까지 UI가 표시되지 않기 때문에, 사용자가 초기 로딩을 기다려야 합니다.
• 복잡한 로직과 상태 관리: 여러 데이터를 동시에 처리하고 데이터 로딩과 렌더링을 분리하면서 로직이 복잡해질 수 있습니다.

---

🌟 3. Render as You Fetch

🧐 무엇인가요?

"Render as You Fetch" 전략은 데이터를 요청하는 동시에 컴포넌트를 렌더링하는 방식입니다.
데이터를 점진적으로 로드하여, 사용자가 요청한 데이터가 준비되는 대로 UI에 반영합니다.
React의 Suspense와 같은 기술과 결합해 활용됩니다.
 

코드 예제

import React, { Suspense } from "react";

const fetchData = async () => {
  const response = await fetch("/api/data");
  return response.json();
};

const resource = fetchData();

function DataComponent() {
  const data = resource.read(); // 데이터가 로드될 때까지 Suspense 대기
  return <div>{data.title}</div>;
}

function RenderAsYouFetch() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <DataComponent />
    </Suspense>
  );
}

✅ 장점

• 최적의 사용자 경험: 사용자가 페이지를 열면 즉시 UI가 표시되므로, 초기 로딩 속도가 빨라집니다. 데이터가 로드되는 동안 컴포넌트를 점진적으로 렌더링하기 때문에 사용자는 기본 UI를 사용할 수 있습니다
• 효율적 로딩: 네트워크 지연 없이 가장 빠르게 데이터를 UI에 반영할 수 있습니다.
• Suspense 활용 가능: React의 고급 기능과 결합하면 더욱 강력하게 사용할 수 있습니다.

❌ 단점

• 초기 설정 복잡성: Suspense 및 서버 상태 관리 라이브러리를 설정하는 데 시간이 걸릴 수 있습니다.
• 복잡한 상태 관리: 데이터의 로딩 상태를 관리하는 로직이 복잡해질 수 있습니다. 여러 개의 데이터 조각을 동시에 로드하는 경우, 각 데이터의 로딩 상태를 관리해야 합니다.
• 제한된 React 기능(React 18 이상 필요): Concurrent Rendering과 Suspense를 사용해야 하므로 최신 React 버전에서만 가능합니다. 아직 일부 기능이 제한적으로 지원됩니다(예: Suspense for Data Fetching)
• UI 일관성 문제: 데이터를 점진적으로 로드하는 동안 UI가 변경될 수 있어 사용자에게 혼란을 줄 수 있습니다.

---

🧩 Fetching Strategies의 비교

특성	Fetch on Render	Fetch then Render	Render as You Fetch
초기 렌더링 속도	느림	중간	빠름
코드 복잡도	간단	보통	높음
UX 경험	중간	중간	우수
상태 관리	컴포넌트 내부	컴포넌트 외부	Suspense 기반
적용 사례	간단한 애플리케이션	데이터 중심 애플리케이션	고성능 대규모 애플리케이션

---

🚀 최적의 방법을 선택하려면?

1. 간단한 앱이라면, Fetch on Render 사용하여 빠르게 개발 시작!
2. 데이터 중심 애플리케이션이라면, Fetch then Render를 선택해 데이터 다루기!
3. 복잡한 대규모 애플리케이션에서는 Render as You Fetch를 통해 최적의 UX 띄우기!

🌷 전설의 개발자가 되어봅시당! 🌷