Intro

왜 비동기 처리 방식이 중요한가?

1. 대부분의 데이터는 즉시 사용할 수 없다
   • 예: API 응답, DB 요청, 리소스 로딩
   • React 컴포넌트가 렌더링되는 시점에 데이터가 아직 준비되지 않은 경우가 대부분입니다.
2. UX에서의 속도와 일관성
   • 사용자는 화면이 빈 상태로 잠깐 멈추는 것보다, 로딩 중이라는 명확한 상태를 보고 싶어합니다.
   • 데이터를 기다리는 동안에도 사용자 경험을 망치지 않도록 로딩 상태(fallback UI)를 제공하는 것이 중요합니다.
3. 서버 사이드 렌더링(SSR)과의 호환
   • 서버에서 HTML을 렌더링할 때도 비동기 데이터가 필요합니다.
   • 이 때는 await이나 Suspense 없이 동기적인 코드처럼 데이터를 다룰 수 있어야 전체 앱의 렌더링 흐름이 깔끔해집니다.

기존 방식의 한계: useEffect + useState

'use client';
import { useEffect, useState } from 'react';

function Profile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(setUser);
  }, []);

  if (!user) return <p>Loading...</p>;
  return <p>{user.name}</p>;
}

1. 데이터는 컴포넌트 렌더 이후에야 가져온다

• 첫 렌더링 시 user는 null → 이후에야 fetch 실행
• 즉, 항상 로딩 상태 → 실제 데이터로 2번 렌더링

2. 로딩, 에러, 성공 상태를 수동으로 관리해야 한다

• isLoading, isError, data 상태를 매번 직접 분기
• 복잡한 컴포넌트일수록 상태 관리 코드가 많아짐

3. 서버 사이드 렌더링과 호환이 어렵다

• useEffect는 클라이언트에서만 실행되기 때문에 SSR에서는 작동하지 않음
• 서버에서 데이터를 미리 가져오지 못해, 클라이언트에서 다시 한번 fetch해야 함

4. 코드가 선언적이지 않다

• UI는 데이터 도착 이후에야 정의 가능
• 로딩/에러 상태 분기 직접 해야 함

Suspense란 무엇인가

준비되지 않은 데이터나 리소스가 있을 때, 해당 컴포넌트의 렌더링을 일시 중단하고, 대신 fallback UI를 보여주는 역할을 합니다.

어떻게 작동할까?

작동 흐름

1. 컴포넌트가 렌더링 중 use(promise) 또는 lazy 컴포넌트 등을 통해 Promise를 throw함
2. React는 이 Promise를 감지하고 해당 컴포넌트의 렌더링을 일시 중단(Suspend)
3. 대신 에서 지정한 UI를 먼저 렌더링
4. Promise가 resolve되면, 정상적으로 다시 렌더링됨

use() 훅 소개

const data = use(fetchData());

use()는 무엇을 받을 수 있나요?

• Promise (ex: fetch, API 요청)
• Context 객체 (React의 context 값)
• 리소스 객체 (React cache 등에서 지원하는 fetch 결과)

서버 컴포넌트에서의 비동기 처리

export default async function Page() {
  const user = await getUser(); // API 또는 DB에서 데이터 요청
  return <UserProfile user={user} />;
}

왜 서버 컴포넌트에서는 await가 가능한가?

• 데이터가 준비된 상태로 클라이언트에 전달됨
• 클라이언트 측의 로딩 상태 없이 바로 렌더링 가능
• 클라이언트 측 fetch 비용과 코드 복잡도 감소

클라이언트 컴포넌트에서의 use(Promise) 사용법

'use client';
import { use } from 'react';

export function Message({ messagePromise }) {
  const message = use(messagePromise);
  return <p>{message}</p>;
}

잘못된 사용 사례와 문제점

'use client';
import { use } from 'react';

export function Message() {
	const messagePromise = fetch('/api/message').then(res => res.text());
  const message = use(messagePromise);
  return <p>{message}</p>;
}

권장 패턴

import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import PhoneDetails from './PhoneDetails';

function App() {
	const messagePromise = fetch('/api/message').then(res => res.text());
  return (
    <ErrorBoundary fallback={<div>문제가 발생했습니다.</div>}>
      <Suspense fallback={<div>휴대전화 정보를 불러오는 중...</div>}>
        <PhoneDetails messagePromise={messagePromise}/>
      </Suspense>
    </ErrorBoundary>
  );
}

이 방식의 장점

마무리

• 기존 useEffect + useState 기반의 데이터 요청 로직을 use()로 바꿔보세요.
  • 특히 서버 컴포넌트에서 데이터를 await한 뒤 클라이언트로 전달해보는 연습이 좋습니다.
• Suspense와 ErrorBoundary를 함께 적용해, 비동기와 에러 흐름을 분리해보세요.
  • 각각의 책임을 나누면 유지보수성과 사용자 경험이 훨씬 좋아집니다.
• 클라이언트 컴포넌트에서 직접 fetch()하는 패턴을 줄이고, 상위 컴포넌트에서 Promise를 주입하는 패턴을 연습해보세요.
  • 깜빡임 없는 UI, 일관된 캐싱을 위해 중요한 구조입니다.