React Suspense 리소스 의존성 그래프: 데이터 로딩 오케스트레이션

React 16.6에서 도입되고 후속 버전에서 더욱 개선된 React Suspense는 React 애플리케이션에서 비동기 데이터 로딩을 처리하는 방식에 혁신을 가져왔습니다. 이 강력한 기능은 리소스 의존성 그래프와 결합하여 데이터 페칭 및 UI 렌더링에 대해 보다 선언적이고 효율적인 접근 방식을 가능하게 합니다. 이 블로그 게시물에서는 React Suspense, 리소스 의존성 그래프, 데이터 로딩 오케스트레이션의 개념을 심도 있게 다루어, 성능 좋고 사용자 친화적인 애플리케이션을 구축하는 데 필요한 지식과 도구를 제공합니다.

React Suspense 이해하기

핵심적으로 React Suspense는 컴포넌트가 API에서 데이터를 가져오는 것과 같은 비동기 작업이 완료되기를 기다리는 동안 렌더링을 "일시 중단"할 수 있게 해줍니다. 애플리케이션 곳곳에 흩어져 있는 로딩 스피너를 보여주는 대신, Suspense는 로딩 상태를 처리하는 통합되고 선언적인 방법을 제공합니다.

주요 개념:

• Suspense 경계(Boundary): 일시 중단될 수 있는 컴포넌트를 감싸는 <Suspense> 컴포넌트입니다. 이는 fallback prop을 받아, 감싸진 컴포넌트가 일시 중단된 동안 렌더링할 UI를 지정합니다.
• Suspense 호환 데이터 페칭: Suspense와 함께 작동하려면, 예외로 던져질 수 있는 "thenable"(Promise)을 사용하는 특정 방식으로 데이터를 가져와야 합니다. 이는 React에게 컴포넌트가 일시 중단되어야 함을 알리는 신호입니다.
• 동시성 모드(Concurrent Mode): Suspense는 동시성 모드 없이도 사용할 수 있지만, 함께 사용할 때 그 잠재력이 최대한 발휘됩니다. 동시성 모드는 React가 UI 응답성을 유지하기 위해 렌더링을 중단, 일시 정지, 재개 또는 포기할 수 있게 해줍니다.

React Suspense의 장점

• 향상된 사용자 경험: 일관된 로딩 표시기와 부드러운 전환은 전반적인 사용자 경험을 개선합니다. 사용자는 깨지거나 불완전한 UI 대신 데이터가 로드 중이라는 명확한 표시를 보게 됩니다.
• 선언적 데이터 페칭: Suspense는 데이터 페칭에 대한 보다 선언적인 접근 방식을 장려하여 코드 가독성과 유지보수성을 높입니다. 데이터를 가져오고 로딩 상태를 관리하는 *방법*이 아닌, *어떤* 데이터가 필요한지에 집중하게 됩니다.
• 코드 분할(Code Splitting): Suspense는 컴포넌트를 지연 로딩(lazy-load)하는 데 사용될 수 있어, 초기 번들 크기를 줄이고 초기 페이지 로드 시간을 개선합니다.
• 단순화된 상태 관리: Suspense는 로딩 로직을 Suspense 경계 내에 중앙 집중화하여 상태 관리의 복잡성을 줄일 수 있습니다.

리소스 의존성 그래프: 데이터 페칭 오케스트레이션

리소스 의존성 그래프는 애플리케이션 내의 다양한 데이터 리소스 간의 의존성을 시각화합니다. 이러한 의존성을 이해하는 것은 효율적인 데이터 로딩 오케스트레이션에 매우 중요합니다. 어떤 리소스가 다른 리소스에 의존하는지 파악함으로써 최적의 순서로 데이터를 가져와 지연을 최소화하고 성능을 향상시킬 수 있습니다.

리소스 의존성 그래프 만들기

먼저 애플리케이션에 필요한 모든 데이터 리소스를 식별하는 것부터 시작하세요. 이는 API 엔드포인트, 데이터베이스 쿼리 또는 로컬 데이터 파일일 수 있습니다. 그런 다음 이러한 리소스 간의 의존성을 매핑하세요. 예를 들어, 사용자 프로필 컴포넌트는 사용자 ID에 의존할 수 있으며, 이는 다시 인증 데이터에 의존할 수 있습니다.

예시: 전자상거래 애플리케이션

전자상거래 애플리케이션을 생각해 봅시다. 다음과 같은 리소스가 있을 수 있습니다:

• 사용자 인증: 사용자 자격 증명이 필요합니다.
• 상품 목록: 카테고리 ID가 필요합니다 (내비게이션 메뉴에서 얻음).
• 상품 상세 정보: 상품 ID가 필요합니다 (상품 목록에서 얻음).
• 사용자 장바구니: 사용자 인증이 필요합니다.
• 배송 옵션: 사용자 주소가 필요합니다 (사용자 프로필에서 얻음).

의존성 그래프는 다음과 같이 보일 것입니다:

사용자 인증 --> 사용자 장바구니, 배송 옵션
상품 목록 --> 상품 상세 정보
배송 옵션 --> 사용자 프로필 (주소)

이 그래프는 데이터를 어떤 순서로 가져와야 하는지 이해하는 데 도움이 됩니다. 예를 들어, 사용자가 인증되기 전까지는 사용자 장바구니를 로드할 수 없습니다.

리소스 의존성 그래프 사용의 이점

• 최적화된 데이터 페칭: 의존성을 이해함으로써 가능할 때마다 데이터를 병렬로 가져와 전체 로딩 시간을 줄일 수 있습니다.
• 개선된 오류 처리: 의존성에 대한 명확한 이해는 오류를 더 우아하게 처리할 수 있게 해줍니다. 중요한 리소스 로드에 실패하면 애플리케이션의 다른 부분에 영향을 주지 않고 적절한 오류 메시지를 표시할 수 있습니다.
• 성능 향상: 효율적인 데이터 로딩은 더 반응성이 좋고 성능이 뛰어난 애플리케이션으로 이어집니다.
• 단순화된 디버깅: 문제가 발생했을 때 의존성 그래프는 근본 원인을 신속하게 파악하는 데 도움이 될 수 있습니다.

Suspense와 리소스 의존성 그래프를 이용한 데이터 로딩 오케스트레이션

React Suspense를 리소스 의존성 그래프와 결합하면 선언적이고 효율적인 방식으로 데이터 로딩을 오케스트레이션할 수 있습니다. 목표는 최적의 순서로 데이터를 가져와 지연을 최소화하고 원활한 사용자 경험을 제공하는 것입니다.

데이터 로딩 오케스트레이션 단계

1. 데이터 리소스 정의: 애플리케이션에 필요한 모든 데이터 리소스를 식별합니다.
2. 리소스 의존성 그래프 생성: 이러한 리소스 간의 의존성을 매핑합니다.
3. Suspense 호환 데이터 페칭 구현: swr나 react-query와 같은 라이브러리를 사용하거나 (또는 직접 구현하여) Suspense와 호환되는 방식으로 데이터를 가져옵니다. 이러한 라이브러리들은 Promise를 예외로 던지기 위한 "thenable" 요구 사항을 처리합니다.
4. 컴포넌트를 Suspense 경계로 감싸기: 비동기 데이터에 의존하는 컴포넌트를 <Suspense> 컴포넌트로 감싸고, 로딩 상태를 위한 fallback UI를 제공합니다.
5. 데이터 페칭 순서 최적화: 리소스 의존성 그래프를 사용하여 데이터 페칭을 위한 최적의 순서를 결정합니다. 독립적인 리소스는 병렬로 가져옵니다.
6. 우아한 오류 처리: 오류 경계(error boundary)를 구현하여 데이터 페칭 중 발생하는 오류를 포착하고 적절한 오류 메시지를 표시합니다.

예시: 게시물이 있는 사용자 프로필

사용자 정보와 그들의 게시물 목록을 표시하는 사용자 프로필 페이지를 생각해 봅시다. 다음과 같은 리소스가 관련됩니다:

• 사용자 프로필: 사용자 세부 정보(이름, 이메일 등)를 가져옵니다.
• 사용자 게시물: 해당 사용자의 게시물 목록을 가져옵니다.

UserPosts 컴포넌트는 UserProfile 컴포넌트에 의존합니다. 다음은 Suspense를 사용하여 이를 구현하는 방법입니다:

import React, { Suspense } from 'react';
import { use } from 'react';
import { fetchUserProfile, fetchUserPosts } from './api';

// Promise를 던지는 데이터 페칭을 시뮬레이션하는 간단한 함수
const createResource = (promise) => {
 let status = 'pending';
 let result;
 let suspender = promise.then(
 (r) => {
 status = 'success';
 result = r;
 },
 (e) => {
 status = 'error';
 result = e;
 }
 );
 return {
 read() {
 if (status === 'pending') {
 throw suspender;
 }
 if (status === 'error') {
 throw result;
 }
 return result;
 }
 };
};

const userProfileResource = createResource(fetchUserProfile(123)); // 사용자 ID 123 가정
const userPostsResource = createResource(fetchUserPosts(123));

function UserProfile() {
 const profile = userProfileResource.read();
 return (
 

 
사용자 프로필
 
이름: {profile.name}
 
이메일: {profile.email}
 
 );
}

function UserPosts() {
 const posts = userPostsResource.read();
 return (
 

 
사용자 게시물
 

 {posts.map(post => (
 
{post.title}
 ))}
 
 
 );
}

function ProfilePage() {
 return (
 

 
 
 
 
 
 
 
 );
}

export default ProfilePage;

이 예제에서 fetchUserProfile과 fetchUserPosts는 Promise를 반환하는 비동기 함수입니다. createResource 함수는 Promise를 read 메서드가 있는 Suspense 호환 리소스로 변환합니다. 데이터가 사용 가능해지기 전에 userProfileResource.read() 또는 userPostsResource.read()가 호출되면, Promise를 던져 컴포넌트가 일시 중단되게 합니다. 그러면 React는 <Suspense> 경계에 지정된 fallback UI를 렌더링합니다.

데이터 페칭 순서 최적화

위 예제에서 UserProfile과 UserPosts 컴포넌트는 별도의 <Suspense> 경계로 감싸져 있습니다. 이를 통해 독립적으로 로드될 수 있습니다. 만약 UserPosts가 UserProfile의 데이터에 의존했다면, 사용자 프로필 데이터가 먼저 로드되도록 데이터 페칭 로직을 조정해야 합니다.

한 가지 접근법은 UserProfile에서 얻은 사용자 ID를 fetchUserPosts에 전달하는 것입니다. 이렇게 하면 사용자 프로필이 로드된 후에만 게시물을 가져오게 됩니다.

고급 기술 및 고려 사항

Suspense를 사용한 서버 사이드 렌더링(SSR)

Suspense는 서버 사이드 렌더링(SSR)과 함께 사용하여 초기 페이지 로드 시간을 개선할 수도 있습니다. 그러나 SSR과 Suspense를 함께 사용하는 것은 초기 렌더링 중에 일시 중단되면 성능 문제를 일으킬 수 있으므로 신중한 고려가 필요합니다. 초기 렌더링 전에 중요한 데이터가 사용 가능한지 확인하거나, 데이터가 사용 가능해짐에 따라 페이지를 점진적으로 렌더링하는 스트리밍 SSR을 사용하는 것이 중요합니다.

오류 경계(Error Boundaries)

오류 경계는 데이터 페칭 중에 발생하는 오류를 처리하는 데 필수적입니다. <Suspense> 경계를 오류 경계로 감싸서 던져진 모든 오류를 포착하고 사용자에게 적절한 오류 메시지를 표시하세요. 이렇게 하면 오류가 전체 애플리케이션을 중단시키는 것을 방지할 수 있습니다.

import React, { Suspense } from 'react';

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

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

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

 render() {
 if (this.state.hasError) {
 // 사용자 정의 fallback UI를 렌더링할 수 있습니다.
 return <h1>문제가 발생했습니다.</h1>;
 }

 return this.props.children; 
 }
}

function App() {
 return (
 <ErrorBoundary>
 <Suspense fallback={<p>로딩 중...</p>}>
 <MyComponent />
 </Suspense>
 </ErrorBoundary>
 );
}

데이터 페칭 라이브러리

React Suspense와 원활하게 작동하도록 설계된 여러 데이터 페칭 라이브러리가 있습니다. 이러한 라이브러리는 캐싱, 중복 제거, 자동 재시도와 같은 기능을 제공하여 데이터 페칭을 더 효율적이고 신뢰할 수 있게 만듭니다. 인기 있는 옵션은 다음과 같습니다:

• SWR: 원격 데이터 페칭을 위한 경량 라이브러리입니다. Suspense를 내장 지원하며 캐싱 및 재검증을 자동으로 처리합니다.
• React Query: 백그라운드 업데이트, 낙관적 업데이트, 종속 쿼리와 같은 고급 기능을 제공하는 보다 포괄적인 데이터 페칭 라이브러리입니다.
• Relay: 데이터 기반 React 애플리케이션 구축을 위한 프레임워크입니다. GraphQL을 사용하여 데이터를 선언적으로 가져오고 관리하는 방법을 제공합니다.

글로벌 애플리케이션에 대한 고려 사항

글로벌 사용자를 위한 애플리케이션을 구축할 때 데이터 로딩 오케스트레이션을 구현할 때 다음 요소를 고려하세요:

• 네트워크 지연 시간: 네트워크 지연 시간은 사용자의 위치에 따라 크게 달라질 수 있습니다. 지연 시간의 영향을 최소화하도록 데이터 페칭 전략을 최적화하세요. 콘텐츠 전송 네트워크(CDN)를 사용하여 정적 자산을 사용자와 더 가까운 곳에 캐시하는 것을 고려하세요.
• 데이터 현지화: 데이터가 사용자의 선호 언어 및 지역에 맞게 현지화되었는지 확인하세요. 국제화(i18n) 라이브러리를 사용하여 현지화를 처리하세요.
• 시간대: 날짜와 시간을 표시할 때 시간대를 염두에 두세요. moment.js나 date-fns와 같은 라이브러리를 사용하여 시간대 변환을 처리하세요.
• 통화: 사용자의 현지 통화로 통화 값을 표시하세요. 필요한 경우 통화 변환 API를 사용하여 가격을 변환하세요.
• API 엔드포인트: 지연 시간을 최소화하기 위해 사용자와 지리적으로 가까운 API 엔드포인트를 선택하세요. 가능한 경우 지역별 API 엔드포인트를 사용하는 것을 고려하세요.

모범 사례

• Suspense 경계를 작게 유지하세요: 애플리케이션의 큰 부분을 단일 <Suspense> 경계로 감싸지 마세요. UI를 더 작고 관리하기 쉬운 컴포넌트로 나누고 각 컴포넌트를 자체 Suspense 경계로 감싸세요.
• 의미 있는 Fallback 사용하기: 사용자에게 데이터가 로드 중임을 알리는 의미 있는 fallback UI를 제공하세요. 일반적인 로딩 스피너 사용을 피하세요. 대신 최종 UI와 유사한 플레이스홀더 UI를 표시하세요.
• 데이터 페칭 최적화: swr나 react-query와 같은 데이터 페칭 라이브러리를 사용하여 데이터 페칭을 최적화하세요. 이러한 라이브러리는 캐싱, 중복 제거, 자동 재시도와 같은 기능을 제공합니다.
• 우아하게 오류 처리하기: 오류 경계를 사용하여 데이터 페칭 중 발생하는 오류를 포착하고 사용자에게 적절한 오류 메시지를 표시하세요.
• 철저하게 테스트하기: 애플리케이션을 철저하게 테스트하여 데이터 로딩이 올바르게 작동하고 오류가 우아하게 처리되는지 확인하세요.

결론

React Suspense는 리소스 의존성 그래프와 결합하여 데이터 로딩 오케스트레이션에 강력하고 선언적인 접근 방식을 제공합니다. 데이터 리소스 간의 의존성을 이해하고 Suspense 호환 데이터 페칭을 구현함으로써 성능 좋고 사용자 친화적인 애플리케이션을 구축할 수 있습니다. 데이터 페칭 전략을 최적화하고, 오류를 우아하게 처리하며, 글로벌 사용자를 위한 원활한 사용자 경험을 보장하기 위해 애플리케이션을 철저히 테스트하는 것을 잊지 마세요. React가 계속 발전함에 따라 Suspense는 현대 웹 애플리케이션 구축에 있어 더욱 필수적인 부분이 될 것입니다.