React 18의 가장 큰 변화는?

Concurrent Rendering입니다. React가 렌더링을 중단하고 재개할 수 있어 UI 응답성이 크게 향상됩니다. useTransition, useDeferredValue 등의 새로운 Hook이 추가되었습니다.

Suspense는 언제 사용하나요?

데이터 로딩, 코드 스플리팅, 이미지 로딩 등 비동기 작업을 선언적으로 처리할 때 사용합니다. 로딩 상태 관리가 훨씬 간단해집니다.

React 18로 업그레이드해야 하나요?

기존 앱은 점진적으로 업그레이드 가능합니다. 새 프로젝트는 React 18을 사용하는 것이 좋습니다. 성능 향상과 새로운 기능을 활용할 수 있습니다.

React 18 심화 가이드 | Concurrent Features· Suspense

2026년 3월 18일 · 50분 읽기 · 수정 2026년 3월 22일 고급 가이드

이 글의 핵심

React 18의 새로운 Concurrent Features를 완벽 이해. Suspense, useTransition, useDeferredValue, Automatic Batching, Server Components까지 실전 예제로 완벽 이해.

들어가며

React 18은 Concurrent Rendering을 도입하여 UI 응답성을 크게 향상시켰습니다. 렌더링을 중단하고 재개할 수 있어 사용자 경험이 훨씬 부드러워집니다.

실무 경험: 실시간 채팅 UI를 React 18로 마이그레이션하면서, useTransition으로 초당 100건의 메시지 렌더링 시 입력 지연을 완전히 제거한 경험을 공유합니다. 이 글에서 다룰 내용:

Concurrent Rendering 이해
useTransition과 useDeferredValue
Suspense for Data Fetching
Automatic Batching
Server Components
실전 성능 최적화

1. React 18 주요 변경사항

새로운 기능

// 1. Concurrent Rendering
// 렌더링을 중단하고 재개 가능
// 2. useTransition
const [isPending, startTransition] = useTransition();
// 3. useDeferredValue
const deferredValue = useDeferredValue(value);
// 4. Suspense for Data Fetching
<Suspense fallback={<Loading />}>
  <DataComponent />
</Suspense>
// 5. Automatic Batching
// 모든 이벤트에서 자동 배칭
// 6. Server Components (실험적)
// 서버에서 렌더링되는 컴포넌트

설치 및 업그레이드

# 새 프로젝트
npx create-react-app my-app
# 또는
npm create vite@latest my-app -- --template react
# 기존 프로젝트 업그레이드
npm install react@18 react-dom@18
# TypeScript 타입
npm install --save-dev @types/react@18 @types/react-dom@18

Root API 변경

// ❌ React 17
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
// ✅ React 18
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

2. Concurrent Rendering

개념

Concurrent Rendering은 React가 여러 버전의 UI를 동시에 준비할 수 있게 합니다. 렌더링을 중단하고, 우선순위가 높은 작업을 먼저 처리한 후, 다시 재개할 수 있습니다.

// 예시: 검색 입력
function SearchPage() {
  const [query, setQuery] = useState(');
  const [results, setResults] = useState([]);
  // 입력은 즉시 반영 (높은 우선순위)
  // 검색 결과는 천천히 업데이트 (낮은 우선순위)
  
  return (
    <>
      <input 
        value={query}
        onChange={e => setQuery(e.target.value)}  // 즉시
      />
      <SearchResults query={query} />  {/* 지연 가능 */}
    </>
  );
}

3. useTransition

기본 사용법

import { useState, useTransition } from 'react';
function App() {
  const [isPending, startTransition] = useTransition();
  const [input, setInput] = useState(');
  const [list, setList] = useState([]);
  const handleChange = (e) => {
    // 입력은 즉시 업데이트 (높은 우선순위)
    setInput(e.target.value);
    // 리스트 업데이트는 지연 가능 (낮은 우선순위)
    startTransition(() => {
      const newList = generateHugeList(e.target.value);
      setList(newList);
    });
  };
  return (
    <>
      <input value={input} onChange={handleChange} />
      {isPending && <Spinner />}
      <List items={list} />
    </>
  );
}

탭 전환 예제

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');
  const selectTab = (nextTab) => {
    startTransition(() => {
      setTab(nextTab);
    });
  };
  return (
    <>
      <div className="tabs">
        <button onClick={() => selectTab('about')}>About</button>
        <button onClick={() => selectTab('posts')}>Posts</button>
        <button onClick={() => selectTab('contact')}>Contact</button>
      </div>
      
      {isPending && <div className="loading-bar" />}
      
      {tab === 'about' && <About />}
      {tab === 'posts' && <Posts />}  {/* 느린 컴포넌트 */}
      {tab === 'contact' && <Contact />}
    </>
  );
}

useTransition vs setTimeout

// ❌ setTimeout (React가 관리하지 않음)
const handleChange = (e) => {
  setInput(e.target.value);
  setTimeout(() => {
    setList(generateList(e.target.value));
  }, 100);
};
// ✅ useTransition (React가 최적화)
const handleChange = (e) => {
  setInput(e.target.value);
  startTransition(() => {
    setList(generateList(e.target.value));
  });
};

4. useDeferredValue

기본 사용법

import { useState, useDeferredValue, memo } from 'react';
function SearchPage() {
  const [query, setQuery] = useState(');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <input 
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <SearchResults query={deferredQuery} />
    </>
  );
}
// 메모이제이션 필수!
const SearchResults = memo(({ query }) => {
  const results = searchDatabase(query);  // 무거운 작업
  
  return (
    <ul>
      {results.map(r => <li key={r.id}>{r.title}</li>)}
    </ul>
  );
});

useDeferredValue vs useTransition

// useTransition: 상태 업데이트를 직접 제어
const [isPending, startTransition] = useTransition();
startTransition(() => {
  setState(newValue);
});
// useDeferredValue: props/값을 지연
const deferredValue = useDeferredValue(value);

실전 예제: 자동완성

function Autocomplete() {
  const [input, setInput] = useState(');
  const deferredInput = useDeferredValue(input);
  const suggestions = useMemo(
    () => getSuggestions(deferredInput),
    [deferredInput]
  );
  return (
    <div>
      <input
        value={input}
        onChange={e => setInput(e.target.value)}
        placeholder="Type to search..."
      />
      <ul>
        {suggestions.map(s => (
          <li key={s.id}>{s.text}</li>
        ))}
      </ul>
    </div>
  );
}

5. Suspense

코드 스플리팅

import { lazy, Suspense } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

데이터 페칭

// Suspense-enabled 데이터 소스
function fetchData() {
  let status = 'pending';
  let result;
  
  const promise = fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      status = 'success';
      result = data;
    })
    .catch(err => {
      status = 'error';
      result = err;
    });
  
  return {
    read() {
      if (status === 'pending') throw promise;
      if (status === 'error') throw result;
      return result;
    }
  };
}
const dataResource = fetchData();
function DataComponent() {
  const data = dataResource.read();  // Suspense 트리거
  return <div>{data.title}</div>;
}
function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <DataComponent />
    </Suspense>
  );
}

중첩 Suspense

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Header />
      
      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>
      
      <Suspense fallback={<ContentSkeleton />}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

React Query + Suspense

import { useQuery } from '@tanstack/react-query';
function UserProfile({ userId }) {
  const { data } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    suspense: true  // Suspense 활성화
  });
  return <div>{data.name}</div>;
}
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <UserProfile userId={1} />
    </Suspense>
  );
}

6. Automatic Batching

React 17 vs React 18

// React 17: 이벤트 핸들러만 배칭
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 1번 리렌더링 ✅
}
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 2번 리렌더링 ❌
}, 1000);
// React 18: 모든 곳에서 배칭
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 1번 리렌더링 ✅
}, 1000);
fetch('/api').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 1번 리렌더링 ✅
});

배칭 비활성화

import { flushSync } from 'react-dom';
function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // DOM 즉시 업데이트
  
  flushSync(() => {
    setFlag(f => !f);
  });
  // DOM 즉시 업데이트
}

7. Server Components

기본 개념

// Server Component (기본)
async function BlogPost({ id }) {
  // 서버에서만 실행
  const post = await db.posts.findById(id);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}
// Client Component
'use client';  // 명시적 선언
import { useState } from 'react';
function LikeButton() {
  const [likes, setLikes] = useState(0);
  
  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

Server vs Client Components

특성	Server Component	Client Component
렌더링	서버	클라이언트
번들 크기	0 (서버에만)	포함됨
데이터 페칭	직접 가능	fetch/API 필요
Hooks	불가	가능
이벤트 핸들러	불가	가능
브라우저 API	불가	가능

혼합 사용

// Server Component
async function BlogPost({ id }) {
  const post = await fetchPost(id);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      
      {/* Client Component 포함 */}
      <LikeButton postId={id} />
      <Comments postId={id} />
    </article>
  );
}
// Client Component
'use client';
function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}

9. 실전 예제

예제 1: 검색 UI

import { useState, useTransition, useDeferredValue } from 'react';
function SearchApp() {
  const [query, setQuery] = useState(');
  const [isPending, startTransition] = useTransition();
  const deferredQuery = useDeferredValue(query);
  const handleSearch = (e) => {
    const value = e.target.value;
    setQuery(value);
    
    startTransition(() => {
      // 무거운 검색 로직
      performSearch(value);
    });
  };
  return (
    <div>
      <input
        value={query}
        onChange={handleSearch}
        placeholder="Search..."
      />
      
      {isPending && <ProgressBar />}
      
      <Suspense fallback={<SearchSkeleton />}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </div>
  );
}
const SearchResults = memo(({ query }) => {
  const results = useSearchResults(query);  // 커스텀 Hook
  
  return (
    <ul>
      {results.map(r => (
        <li key={r.id}>{r.title}</li>
      ))}
    </ul>
  );
});

예제 2: 무한 스크롤

import { useInfiniteQuery } from '@tanstack/react-query';
import { useInView } from 'react-intersection-observer';
function InfiniteList() {
  const { ref, inView } = useInView();
  
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
    getNextPageParam: (lastPage) => lastPage.nextPage,
    suspense: true
  });
  useEffect(() => {
    if (inView && hasNextPage) {
      fetchNextPage();
    }
  }, [inView, hasNextPage]);
  return (
    <div>
      {data.pages.map(page => (
        page.posts.map(post => (
          <PostCard key={post.id} post={post} />
        ))
      ))}
      
      <div ref={ref}>
        {isFetchingNextPage && <Spinner />}
      </div>
    </div>
  );
}
function App() {
  return (
    <Suspense fallback={<ListSkeleton />}>
      <InfiniteList />
    </Suspense>
  );
}

예제 3: 실시간 대시보드

function Dashboard() {
  const [isPending, startTransition] = useTransition();
  const [timeRange, setTimeRange] = useState('1h');
  const handleTimeRangeChange = (range) => {
    startTransition(() => {
      setTimeRange(range);
    });
  };
  return (
    <div>
      <TimeRangeSelector 
        value={timeRange}
        onChange={handleTimeRangeChange}
      />
      
      {isPending && <div className="updating-overlay">Updating...</div>}
      
      <Suspense fallback={<ChartSkeleton />}>
        <RealtimeChart timeRange={timeRange} />
      </Suspense>
      
      <Suspense fallback={<TableSkeleton />}>
        <DataTable timeRange={timeRange} />
      </Suspense>
    </div>
  );
}

성능 최적화

1. 메모이제이션

import { memo, useMemo, useCallback } from 'react';
// 컴포넌트 메모이제이션
const ExpensiveComponent = memo(({ data }) => {
  return <div>{/* 렌더링 */}</div>;
});
// 값 메모이제이션
function Component({ items }) {
  const sortedItems = useMemo(
    () => items.sort((a, b) => a.value - b.value),
    [items]
  );
  
  return <List items={sortedItems} />;
}
// 함수 메모이제이션
function Parent() {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);
  
  return <Child onClick={handleClick} />;
}

2. 코드 스플리팅

import { lazy, Suspense } from 'react';
// 라우트별 스플리팅
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
function App() {
  return (
    <Router>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

3. 가상화

import { FixedSizeList } from 'react-window';
function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].title}
    </div>
  );
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

8. 마이그레이션 가이드

단계별 업그레이드

# 1. 패키지 업데이트
npm install react@18 react-dom@18
# 2. TypeScript 타입 (필요시)
npm install --save-dev @types/react@18 @types/react-dom@18
# 3. 테스트
npm test
# 4. 빌드
npm run build

Root API 마이그레이션

// Before (React 17)
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
// After (React 18)
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
// Hydration (SSR)
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);

타입 업데이트

// React 17
import { FC } from 'react';
const Component: FC = ({ children }) => {
  return <div>{children}</div>;
};
// React 18 (children 명시 필요)
import { ReactNode } from 'react';
interface Props {
  children?: ReactNode;
}
const Component = ({ children }: Props) => {
  return <div>{children}</div>;
};

실전 프로젝트: 대시보드

import { useState, useTransition, Suspense } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      staleTime: 5000
    }
  }
});
function Dashboard() {
  const [timeRange, setTimeRange] = useState('24h');
  const [isPending, startTransition] = useTransition();
  const handleTimeRangeChange = (range) => {
    startTransition(() => {
      setTimeRange(range);
    });
  };
  return (
    <div className="dashboard">
      <header>
        <h1>Analytics Dashboard</h1>
        <TimeRangeSelector 
          value={timeRange}
          onChange={handleTimeRangeChange}
        />
      </header>
      {isPending && <LoadingBar />}
      <div className="grid">
        <Suspense fallback={<MetricCardSkeleton />}>
          <MetricsCards timeRange={timeRange} />
        </Suspense>
        <Suspense fallback={<ChartSkeleton />}>
          <RevenueChart timeRange={timeRange} />
        </Suspense>
        <Suspense fallback={<ChartSkeleton />}>
          <UserChart timeRange={timeRange} />
        </Suspense>
        <Suspense fallback={<TableSkeleton />}>
          <RecentOrders timeRange={timeRange} />
        </Suspense>
      </div>
    </div>
  );
}
function MetricsCards({ timeRange }) {
  const { data } = useQuery({
    queryKey: ['metrics', timeRange],
    queryFn: () => fetchMetrics(timeRange)
  });
  return (
    <div className="metrics">
      <MetricCard title="Revenue" value={data.revenue} />
      <MetricCard title="Users" value={data.users} />
      <MetricCard title="Orders" value={data.orders} />
    </div>
  );
}
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Dashboard />
    </QueryClientProvider>
  );
}

디버깅

React DevTools

// Profiler로 성능 측정
import { Profiler } from 'react';
function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  console.log(`${id} (${phase}) took ${actualDuration}ms`);
}
<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>

Concurrent Features 디버깅

// useTransition 디버깅
const [isPending, startTransition] = useTransition();
useEffect(() => {
  console.log('Transition pending:', isPending);
}, [isPending]);
// useDeferredValue 디버깅
const deferredValue = useDeferredValue(value);
useEffect(() => {
  if (value !== deferredValue) {
    console.log('Value deferred:', value, '->', deferredValue);
  }
}, [value, deferredValue]);

베스트 프랙티스

1. useTransition 사용 시기

// ✅ 좋은 사용 사례
// - 무거운 리스트 렌더링
// - 탭 전환
// - 검색 결과 업데이트
// - 필터링/정렬
// ❌ 나쁜 사용 사례
// - 입력 필드 업데이트 (즉시 반영 필요)
// - 애니메이션 (즉시 반영 필요)
// - 네트워크 요청 (Suspense 사용)

2. Suspense 경계 설정

// ✅ 적절한 Suspense 경계
<Suspense fallback={<HeaderSkeleton />}>
  <Header />
</Suspense>
<Suspense fallback={<ContentSkeleton />}>
  <MainContent />
</Suspense>
// ❌ 너무 큰 Suspense 경계
<Suspense fallback={<PageSkeleton />}>
  <Header />
  <Sidebar />
  <MainContent />
  <Footer />
</Suspense>

3. 에러 처리

import { ErrorBoundary } from 'react-error-boundary';
function App() {
  return (
    <ErrorBoundary fallback={<ErrorPage />}>
      <Suspense fallback={<Loading />}>
        <Content />
      </Suspense>
    </ErrorBoundary>
  );
}

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. React 18의 새로운 기능 완벽 가이드. Concurrent Rendering, Suspense, useTransition, useDeferredValue, Automatic Batching, Server Com… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

참고 자료

React 18 Release Notes
React Docs
React Working Group
React Conf 2021 한 줄 요약: React 18은 Concurrent Rendering으로 UI 응답성을 크게 향상시켰으며, useTransition, useDeferredValue, Suspense를 활용하면 더 부드러운 사용자 경험을 제공할 수 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「React 18 심화 가이드 | Concurrent Features, Suspense, Transitions 완벽 이해」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「React 18 심화 가이드 | Concurrent Features, Suspense, Transitions 완벽 이해」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

React, React 18, Concurrent Rendering, Suspense, useTransition, Server Components, Frontend 등으로 검색하시면 이 글이 도움이 됩니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

들어가며

1. React 18 주요 변경사항

새로운 기능

설치 및 업그레이드

Root API 변경

2. Concurrent Rendering

개념

3. useTransition

기본 사용법

탭 전환 예제

useTransition vs setTimeout

4. useDeferredValue

기본 사용법

useDeferredValue vs useTransition

실전 예제: 자동완성

5. Suspense

코드 스플리팅

데이터 페칭

중첩 Suspense

React Query + Suspense

6. Automatic Batching

React 17 vs React 18

배칭 비활성화

7. Server Components

기본 개념

Server vs Client Components

혼합 사용

9. 실전 예제

예제 1: 검색 UI

예제 2: 무한 스크롤

예제 3: 실시간 대시보드

성능 최적화

1. 메모이제이션

2. 코드 스플리팅

3. 가상화

8. 마이그레이션 가이드

단계별 업그레이드

Root API 마이그레이션

타입 업데이트

실전 프로젝트: 대시보드

디버깅

React DevTools

Concurrent Features 디버깅

베스트 프랙티스

1. useTransition 사용 시기

2. Suspense 경계 설정

3. 에러 처리

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

Q. 선행으로 읽으면 좋은 글은?

Q. 더 깊이 공부하려면?

참고 자료

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

같이 보면 좋은 글 (내부 링크)

이 글에서 다루는 키워드 (관련 검색어)

이 글이 도움이 되셨나요?