React Suspense 로딩 상태 구성 트리: 중첩된 로딩 관리

React Suspense는 주로 데이터 가져오기와 같은 비동기 작업을 더 원활하게 처리하기 위해 도입된 강력한 기능입니다. 데이터 로드를 기다리는 동안 컴포넌트 렌더링을 "일시 중단"하고, 그동안 대체 UI를 표시할 수 있습니다. 이는 UI의 여러 부분이 다양한 소스로부터 비동기 데이터에 의존하는 복잡한 컴포넌트 트리에서 특히 유용합니다. 이 글에서는 중첩된 컴포넌트 구조 내에서 Suspense를 효과적으로 사용하는 방법을 깊이 있게 다루고, 일반적인 문제들을 해결하며 실용적인 예제를 제공합니다.

React Suspense의 이해와 장점

중첩 시나리오를 살펴보기 전에, React Suspense의 핵심 개념을 다시 짚어보겠습니다.

React Suspense란 무엇인가?

Suspense는 코드가 로드되기를 "기다리고", 기다리는 동안 표시할 로딩 상태(fallback)를 선언적으로 지정할 수 있게 해주는 React 컴포넌트입니다. React.lazy를 사용하는 지연 로딩 컴포넌트 및 Suspense와 통합되는 데이터 가져오기 라이브러리와 함께 작동합니다.

Suspense 사용의 이점:

• 향상된 사용자 경험: 빈 화면 대신 의미 있는 로딩 표시기를 보여주어 앱이 더 반응적으로 느껴지게 합니다.
• 선언적 로딩 상태: 컴포넌트 트리에서 직접 로딩 상태를 정의하여 코드를 읽고 이해하기 쉽게 만듭니다.
• 코드 분할: Suspense는 코드 분할(React.lazy 사용)과 원활하게 작동하여 초기 로드 시간을 개선합니다.
• 간소화된 비동기 데이터 가져오기: Suspense는 호환되는 데이터 가져오기 라이브러리와 통합되어 데이터 로딩에 대한 보다 간소화된 접근 방식을 가능하게 합니다.

과제: 중첩된 로딩 상태

Suspense가 전반적으로 로딩 상태를 단순화하지만, 깊게 중첩된 컴포넌트 트리에서 로딩 상태를 관리하는 것은 복잡해질 수 있습니다. 부모 컴포넌트가 일부 초기 데이터를 가져온 다음, 각각 자체 데이터를 가져오는 자식 컴포넌트들을 렌더링하는 시나리오를 상상해 보십시오. 부모 컴포넌트는 데이터를 표시하지만 자식 컴포넌트들은 여전히 로딩 중인 상황이 발생하여, 일관성 없는 사용자 경험을 초래할 수 있습니다.

다음과 같은 단순화된 컴포넌트 구조를 고려해 보세요:

<ParentComponent>
  <ChildComponent1>
    <GrandChildComponent />
  </ChildComponent1>
  <ChildComponent2 />
</ParentComponent>

이 컴포넌트들은 각각 비동기적으로 데이터를 가져올 수 있습니다. 우리는 이러한 중첩된 로딩 상태를 원활하게 처리할 전략이 필요합니다.

Suspense를 이용한 중첩 로딩 관리 전략

다음은 중첩된 로딩 상태를 효과적으로 관리하기 위해 사용할 수 있는 몇 가지 전략입니다:

1. 개별 Suspense 경계

가장 간단한 접근 방식은 데이터를 가져오는 각 컴포넌트를 자체 <Suspense> 경계로 감싸는 것입니다. 이를 통해 각 컴포넌트는 독립적으로 자신의 로딩 상태를 관리할 수 있습니다.

const ParentComponent = () => {
  // ...
  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <ChildComponent1 />
      <ChildComponent2 />
    </div>
  );
};

const ChildComponent1 = () => {
  return (
    <Suspense fallback={<p>자식 1 로딩 중...</p>}>
      <AsyncChild1 />
    </Suspense>
  );
};

const ChildComponent2 = () => {
  return (
    <Suspense fallback={<p>자식 2 로딩 중...</p>}>
      <AsyncChild2 />
    </Suspense>
  );
};

const AsyncChild1 = () => {
  const data = useAsyncData('child1'); // 비동기 데이터 가져오기를 위한 커스텀 훅
  return <p>자식 1의 데이터: {data}</p>;
};

const AsyncChild2 = () => {
  const data = useAsyncData('child2'); // 비동기 데이터 가져오기를 위한 커스텀 훅
  return <p>자식 2의 데이터: {data}</p>;
};

const useAsyncData = (key) => {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    let didCancel = false;
    const fetchData = async () => {
      // 데이터 가져오기 지연 시뮬레이션
      await new Promise(resolve => setTimeout(resolve, 1000));
      if (!didCancel) {
        setData(`${key}를 위한 데이터`);
      }
    };

    fetchData();

    return () => {
      didCancel = true;
    };
  }, [key]);

  if (data === null) {
    throw new Promise(resolve => setTimeout(resolve, 1000)); // 나중에 해결될 프로미스 시뮬레이션
  }
  return data;
};

export default ParentComponent;

장점: 구현이 간단하며, 각 컴포넌트가 자체 로딩 상태를 처리합니다. 단점: 여러 로딩 표시기가 다른 시간에 나타나 사용자 경험을 어색하게 만들 수 있습니다. 로딩 표시기의 "폭포수" 효과는 시각적으로 매력적이지 않을 수 있습니다.

2. 최상위 레벨의 공유 Suspense 경계

또 다른 접근 방식은 전체 컴포넌트 트리를 최상위 레벨에서 단일 <Suspense> 경계로 감싸는 것입니다. 이렇게 하면 모든 비동기 데이터가 로드될 때까지 전체 UI가 기다렸다가 렌더링됩니다.

const App = () => {
  return (
    <Suspense fallback={<p>앱 로딩 중...</p>}>
      <ParentComponent />
    </Suspense>
  );
};

장점: 모든 데이터가 로드된 후 전체 UI가 한 번에 나타나므로 더 일관된 로딩 경험을 제공합니다. 단점: 일부 컴포넌트가 데이터를 로드하는 데 상당한 시간이 걸리는 경우, 사용자가 무언가를 보기까지 오랜 시간을 기다려야 할 수 있습니다. 이는 모든 시나리오에 이상적이지 않은 '전부 아니면 전무' 방식입니다.

3. 조화로운 로딩을 위한 SuspenseList

<SuspenseList>는 Suspense 경계가 나타나는 순서를 조절할 수 있는 컴포넌트입니다. 이를 통해 로딩 상태 표시를 제어하여 폭포수 효과를 방지하고 더 부드러운 시각적 전환을 만들 수 있습니다.

<SuspenseList>에는 두 가지 주요 props가 있습니다: * `revealOrder`: <SuspenseList>의 자식들이 나타나는 순서를 제어합니다. `'forwards'`, `'backwards'`, 또는 `'together'`가 될 수 있습니다. * `tail`: 일부 항목은 준비되었지만 전부는 아닐 때, 아직 나타나지 않은 나머지 항목을 어떻게 처리할지 제어합니다. `'collapsed'` 또는 `'suspended'`가 될 수 있습니다.

import { unstable_SuspenseList as SuspenseList } from 'react';

const ParentComponent = () => {
  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <SuspenseList revealOrder="forwards" tail="suspended">
        <Suspense fallback={<p>자식 1 로딩 중...</p>}>
          <ChildComponent1 />
        </Suspense>
        <Suspense fallback={<p>자식 2 로딩 중...</p>}>
          <ChildComponent2 />
        </Suspense>
      </SuspenseList>
    </div>
  );
};

이 예제에서, `revealOrder="forwards"` prop은 ChildComponent1이 ChildComponent2보다 먼저 나타나도록 보장합니다. `tail="suspended"` prop은 ChildComponent1이 완전히 로드될 때까지 ChildComponent2의 로딩 표시기가 계속 보이도록 합니다.

장점: 로딩 상태가 나타나는 순서를 세밀하게 제어하여 더 예측 가능하고 시각적으로 매력적인 로딩 경험을 제공합니다. 폭포수 효과를 방지합니다. 단점: <SuspenseList>와 그 props에 대한 더 깊은 이해가 필요합니다. 개별 Suspense 경계보다 설정이 더 복잡할 수 있습니다.

4. Suspense와 커스텀 로딩 표시기 결합

<Suspense>가 제공하는 기본 fallback UI 대신, 사용자에게 더 많은 시각적 맥락을 제공하는 커스텀 로딩 표시기를 만들 수 있습니다. 예를 들어, 로드되는 컴포넌트의 레이아웃을 모방한 스켈레톤 로딩 애니메이션을 표시할 수 있습니다. 이는 인지 성능과 사용자 경험을 크게 향상시킬 수 있습니다.

const ChildComponent1 = () => {
  return (
    <Suspense fallback={<SkeletonLoader />}>
      <AsyncChild1 />
    </Suspense>
  );
};

const SkeletonLoader = () => {
  return (
    <div className="skeleton-loader">
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
    </div>
  );
};

(.skeleton-loader와 .skeleton-line에 대한 CSS 스타일링은 애니메이션 효과를 만들기 위해 별도로 정의해야 합니다.)

장점: 더 매력적이고 유익한 로딩 경험을 만듭니다. 인지 성능을 크게 향상시킬 수 있습니다. 단점: 간단한 로딩 표시기보다 구현하는 데 더 많은 노력이 필요합니다.

5. Suspense와 통합된 데이터 가져오기 라이브러리 활용

Relay나 SWR(Stale-While-Revalidate)과 같은 일부 데이터 가져오기 라이브러리는 Suspense와 원활하게 작동하도록 설계되었습니다. 이러한 라이브러리들은 데이터가 로드되는 동안 컴포넌트를 일시 중단하는 내장 메커니즘을 제공하여 로딩 상태 관리를 더 쉽게 만듭니다.

다음은 SWR을 사용한 예입니다:

import useSWR from 'swr'

const AsyncChild1 = () => {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>로드 실패</div>
  if (!data) return <div>로딩 중...</div> // SWR이 내부적으로 suspense를 처리합니다

  return <div>{data.name}</div>
}

const fetcher = (...args) => fetch(...args).then(res => res.json())

SWR은 데이터 로딩 상태에 따라 suspense 동작을 자동으로 처리합니다. 데이터가 아직 사용 가능하지 않으면 컴포넌트는 일시 중단되고, <Suspense> fallback이 표시됩니다.

장점: 데이터 가져오기 및 로딩 상태 관리를 단순화합니다. 종종 성능 향상을 위한 캐싱 및 재검증 전략을 제공합니다. 단점: 특정 데이터 가져오기 라이브러리를 채택해야 합니다. 라이브러리와 관련된 학습 곡선이 있을 수 있습니다.

고급 고려 사항

오류 경계(Error Boundaries)를 사용한 오류 처리

Suspense는 로딩 상태를 처리하지만, 데이터 가져오기 중에 발생할 수 있는 오류는 처리하지 않습니다. 오류 처리를 위해서는 오류 경계(Error Boundaries)를 사용해야 합니다. 오류 경계는 자식 컴포넌트 트리 어디에서든 JavaScript 오류를 포착하고, 해당 오류를 기록하며, 대체 UI를 표시하는 React 컴포넌트입니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 상태를 업데이트합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 오류 보고 서비스에 오류를 기록할 수도 있습니다
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 어떤 커스텀 대체 UI든 렌더링할 수 있습니다
      return <h1>문제가 발생했습니다.</h1>;
    }

    return this.props.children; 
  }
}

const ParentComponent = () => {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>로딩 중...</p>}>
        <ChildComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

<Suspense> 경계를 <ErrorBoundary>로 감싸 데이터 가져오기 중 발생할 수 있는 모든 오류를 처리하세요.

성능 최적화

Suspense가 사용자 경험을 개선하지만, 성능 병목 현상을 피하기 위해 데이터 가져오기 및 컴포넌트 렌더링을 최적화하는 것이 중요합니다. 다음을 고려하세요:

• 메모이제이션: React.memo를 사용하여 동일한 props를 받는 컴포넌트의 불필요한 재렌더링을 방지합니다.
• 코드 분할: React.lazy를 사용하여 코드를 더 작은 청크로 분할하여 초기 로드 시간을 줄입니다.
• 캐싱: 중복된 데이터 가져오기를 피하기 위해 캐싱 전략을 구현합니다.
• 디바운싱 및 스로틀링: API 호출 빈도를 제한하기 위해 디바운싱 및 스로틀링 기술을 사용합니다.

서버 사이드 렌더링 (SSR)

Suspense는 Next.js나 Remix와 같은 서버 사이드 렌더링(SSR) 프레임워크와 함께 사용할 수도 있습니다. 그러나 Suspense를 사용한 SSR은 데이터 하이드레이션과 관련된 복잡성을 유발할 수 있으므로 신중한 고려가 필요합니다. 불일치를 피하기 위해 서버에서 가져온 데이터가 클라이언트에서 올바르게 직렬화되고 하이드레이션되는지 확인하는 것이 중요합니다. SSR 프레임워크는 보통 SSR과 함께 Suspense를 관리하기 위한 헬퍼와 모범 사례를 제공합니다.

실용적인 예제 및 사용 사례

실제 애플리케이션에서 Suspense를 어떻게 사용할 수 있는지 몇 가지 실용적인 예제를 살펴보겠습니다:

1. 전자상거래 상품 페이지

전자상거래 상품 페이지에서는 상품 상세 정보, 리뷰, 관련 상품 등 비동기적으로 데이터를 로드하는 여러 섹션이 있을 수 있습니다. Suspense를 사용하여 데이터가 로드되는 동안 각 섹션에 대한 로딩 표시기를 표시할 수 있습니다.

2. 소셜 미디어 피드

소셜 미디어 피드에서는 게시물, 댓글, 사용자 프로필 등이 독립적으로 데이터를 로드할 수 있습니다. Suspense를 사용하여 데이터가 로드되는 동안 각 게시물에 대한 스켈레톤 로딩 애니메이션을 표시할 수 있습니다.

3. 대시보드 애플리케이션

대시보드 애플리케이션에서는 차트, 테이블, 지도가 다른 소스에서 데이터를 로드할 수 있습니다. Suspense를 사용하여 데이터가 로드되는 동안 각 차트, 테이블 또는 지도에 대한 로딩 표시기를 표시할 수 있습니다.

글로벌 대시보드 애플리케이션의 경우 다음을 고려하세요:

• 시간대: 사용자의 현지 시간대에 맞춰 데이터를 표시합니다.
• 통화: 사용자의 현지 통화로 금액을 표시합니다.
• 언어: 대시보드 인터페이스에 다국어 지원을 제공합니다.
• 지역별 데이터: 사용자가 자신의 지역이나 국가에 따라 데이터를 필터링하고 볼 수 있도록 합니다.

결론

React Suspense는 React 애플리케이션에서 비동기 데이터 가져오기 및 로딩 상태를 관리하는 강력한 도구입니다. 중첩된 로딩 관리에 대한 다양한 전략을 이해함으로써 복잡한 컴포넌트 트리에서도 더 부드럽고 매력적인 사용자 경험을 만들 수 있습니다. 프로덕션 애플리케이션에서 Suspense를 사용할 때는 오류 처리, 성능 최적화, 서버 사이드 렌더링을 고려하는 것을 잊지 마십시오. 비동기 작업은 많은 애플리케이션에서 흔하며, React Suspense를 사용하면 이를 깔끔하게 처리할 수 있습니다.