React 18의 새로운 기능인 Concurrent Features와 Suspense에 대해 설명해주세요.

// React 17 이하 — 한번 렌더링이 시작되면 멈출 수 없음
function HeavyComponent() {
  // 무거운 연산이 실행되는 동안 UI가 블로킹됨
  const result = heavyComputation(); // 수백 ms 소요
  return <div>{result}</div>;
}

import { useState, useTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    // 입력값 업데이트는 긴급 — 즉시 처리
    setQuery(e.target.value);

    // 검색 결과 업데이트는 비긴급 — 전환으로 처리
    startTransition(() => {
      const filtered = searchItems(e.target.value);
      setResults(filtered);
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? (
        <p>검색 중...</p>
      ) : (
        <ul>
          {results.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      )}
    </div>
  );
}

import { startTransition } from 'react';

// 라우터나 외부 라이브러리에서 활용
function navigateTo(page) {
  startTransition(() => {
    // 페이지 전환은 비긴급으로 처리
    setCurrentPage(page);
  });
}

import { useState, useDeferredValue, memo } from 'react';

// memo로 감싸야 최적화 효과를 볼 수 있음
const HeavyList = memo(function HeavyList({ query }) {
  // 무거운 필터링 연산
  const items = hugeList.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
});

function SearchPage() {
  const [query, setQuery] = useState('');
  // deferredQuery는 query보다 한 박자 늦게 업데이트됨
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="검색..."
      />
      {/* 입력창은 즉시 반응, 목록은 지연 업데이트 */}
      <HeavyList query={deferredQuery} />
    </div>
  );
}

import { Suspense, lazy } from 'react';

// 동적 import로 코드 스플리팅
const HeavyDashboard = lazy(() => import('./HeavyDashboard'));

function App() {
  return (
    <Suspense fallback={<div>대시보드 로딩 중...</div>}>
      <HeavyDashboard />
    </Suspense>
  );
}

// SWR과 함께 사용하는 예시
import { Suspense } from 'react';
import useSWR from 'swr';

function UserProfile({ userId }) {
  // suspense: true 옵션으로 데이터 준비 전에 Suspense에 알림
  const { data: user } = useSWR(`/api/users/${userId}`, fetcher, {
    suspense: true,
  });

  // 이 시점에서 user는 반드시 존재함 (로딩 중이면 여기까지 오지 않음)
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<UserSkeleton />}>
      <UserProfile userId={1} />
    </Suspense>
  );
}

function Dashboard() {
  return (
    <div>
      {/* 사이드바는 독립적으로 로딩 */}
      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>

      {/* 메인 콘텐츠 영역 */}
      <Suspense fallback={<ContentSkeleton />}>
        <MainContent />
        {/* 중첩된 Suspense — 댓글은 별도로 로딩 */}
        <Suspense fallback={<CommentsSkeleton />}>
          <Comments />
        </Suspense>
      </Suspense>
    </div>
  );
}

// Next.js 13+ App Router에서의 서버 컴포넌트 예시
import { Suspense } from 'react';

async function SlowData() {
  // 서버에서 느린 데이터 페칭
  const data = await fetchSlowData();
  return <div>{data.content}</div>;
}

export default function Page() {
  return (
    <main>
      <h1>빠른 콘텐츠</h1>  {/* 즉시 전송 */}
      <Suspense fallback={<p>느린 데이터 로딩 중...</p>}>
        <SlowData />  {/* 준비되면 스트리밍 */}
      </Suspense>
    </main>
  );
}