Request Waterfall 방식과 Parallel 방식

Request Waterfall 방식

Request Waterfall 방식은 말 그대로 요청이 순차적으로 실행되는 패턴입니다.

첫 번째 API 요청이 완료된 후 그 결과를 기반으로 다음 요청이 실행되는 방식으로, 요청 간 의존성이 존재할 때 사용됩니다.
하지만 의존성이 없는 여러 요청을 순차적으로 처리하면 전체 응답 시간이 불필요하게 늘어나게 됩니다.

예제: Waterfall 방식으로 API 요청 처리하기

아래 예제는 두 개의 API를 순차적으로 호출하는 예시입니다.

첫 번째 API의 결과를 기다린 후 두 번째 API를 호출합니다.

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

type User = { id: number; name: string };
type Posts = { id: number; title: string }[];

const WaterfallComponent: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [posts, setPosts] = useState<Posts | null>(null);

  useEffect(() => {
    const fetchUserAndPosts = async () => {
      try {
        // 첫 번째 요청: 사용자 정보 가져오기
        const userResponse = await fetch('https://api.example.com/user');
        const userData: User = await userResponse.json();
        setUser(userData);

        // 두 번째 요청: 사용자의 게시글 가져오기
        const postsResponse = await fetch(`https://api.example.com/posts?userId=${userData.id}`);
        const postsData: Posts = await postsResponse.json();
        setPosts(postsData);
      } catch (error) {
        console.error('API 호출 중 에러 발생:', error);
      }
    };

    fetchUserAndPosts();
  }, []);

  return (
    <div>
      <h2>Waterfall 방식 예제</h2>
      {user ? <div>사용자: {user.name}</div> : <div>사용자 정보를 불러오는 중...</div>}
      {posts ? (
        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <div>게시글을 불러오는 중...</div>
      )}
    </div>
  );
};

export default WaterfallComponent;

• 위 예제에서는 첫 번째 API 호출이 완료된 후 그 결과를 사용해 두 번째 API 요청을 실행합니다.
• API 간 의존성이 있는 경우에는 적절하지만, 독립적인 API 호출에 이 방식을 사용하면 전체 요청 시간이 길어집니다.

---

Parallel 방식

Parallel 방식은 의존성이 없는 여러 API 요청을 동시에 실행하여 응답 시간을 단축하는 방식입니다.

주로 Promise.all을 사용하여 여러 요청을 병렬로 처리할 수 있습니다.

예제: Parallel 방식으로 API 요청 처리하기

아래 예제는 사용자 정보와 사용자의 게시글을 병렬로 요청하는 예시입니다.

두 요청이 동시에 실행되므로 전체 요청 시간이 더 짧아집니다.

 

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

type User = { id: number; name: string };
type Posts = { id: number; title: string }[];

const ParallelComponent: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [posts, setPosts] = useState<Posts | null>(null);

  useEffect(() => {
    const fetchDataInParallel = async () => {
      try {
        // 두 API 요청을 병렬로 실행
        const [userResponse, postsResponse] = await Promise.all([
          fetch('https://api.example.com/user'),
          fetch('https://api.example.com/posts'),
        ]);

        const userData: User = await userResponse.json();
        const postsData: Posts = await postsResponse.json();

        setUser(userData);
        setPosts(postsData);
      } catch (error) {
        console.error('API 호출 중 에러 발생:', error);
      }
    };

    fetchDataInParallel();
  }, []);

  return (
    <div>
      <h2>Parallel 방식 예제</h2>
      {user ? <div>사용자: {user.name}</div> : <div>사용자 정보를 불러오는 중...</div>}
      {posts ? (
        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <div>게시글을 불러오는 중...</div>
      )}
    </div>
  );
};

export default ParallelComponent;

• 이 예제에서는 의존성이 없는 두 API를 동시에 호출하므로, 두 요청 모두 병렬로 실행되어 페이지 렌더링 시간을 줄일 수 있습니다.

 

• 의존성이 있는 요청: 첫 번째 API의 결과가 두 번째 API 호출에 필수적이라면 waterfall 방식을 사용해야 합니다.
• 의존성이 없는 요청: 서로 독립적인 API 요청은 parallel 방식으로 실행해 효율성을 높이는 것이 좋습니다.

또한, 데이터 로딩 상태 관리나 에러 핸들링 등 부가적인 최적화 기법을 도입하면 사용자 경험을 더욱 향상시킬 수 있습니다.
예를 들어, React Query나 SWR 같은 라이브러리를 사용하면 캐싱, 자동 재시도 등 부가적인 기능을 쉽게 구현할 수 있습니다.

 

API 호출을 최적화하는 것은 애플리케이션 성능 개선의 핵심 요소입니다.

• Waterfall 방식은 의존성이 있는 요청에 적합하며, 순차적으로 실행되어 안정성을 보장합니다.
• Parallel 방식은 독립적인 요청에 대해 전체 응답 시간을 줄여 효율적인 데이터 처리를 가능하게 합니다.