React 18의 가장 큰 변화는?

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

Suspense는 언제 사용하나요?

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

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

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

React 18 심화 가이드 | Concurrent Features, Suspense, Transitions 완벽 이해

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>
  );
}

참고 자료

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

---

이 글의 핵심

들어가며

목차

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. 에러 처리

참고 자료