React 18 핵심 가이드: 동시성 렌더링으로 완성하는 사용자 경험

1. 문제의 배경

기존 React의 렌더링 방식은 동기적(Synchronous)이었습니다. 한 번 렌더링이 시작되면 중단할 수 없었기 때문에, 데이터가 많거나 복잡한 연산이 필요한 컴포넌트를 렌더링할 때 브라우저의 메인 스레드가 차단(Blocking)되는 현상이 발생했습니다.

• UI 프리징: 대량의 리스트를 필터링하는 동안 입력 창이 멈추는 현상.
• 비효율적 렌더링: 여러 번의 상태 변경이 개별적으로 렌더링을 유발하여 발생하는 성능 저하.
• SSR의 한계: 서버에서 모든 데이터를 가져와야만 클라이언트로 HTML을 보낼 수 있는 'All-or-Nothing' 방식의 비효율성.

2. 해결 방안 탐색

React 18은 이러한 문제를 해결하기 위해 동시성(Concurrency) 메커니즘을 도입했습니다. 핵심은 "렌더링의 우선순위를 정하고 중단 및 재개할 수 있게 만드는 것"입니다. 이를 위해 다음과 같은 기능들이 추가되었습니다.

1. 자동 배칭(Automatic Batching): 여러 상태 업데이트를 한 번에 처리.
2. Transitions: 긴급한 업데이트와 비긴급한 업데이트를 분리.
3. Suspense on the Server: 서버 사이드 스트리밍 지원.

3. 핵심 개념 및 아키텍처

동시성 렌더링(Concurrent Rendering)

React 18 이전의 렌더링은 선형적이었으나, 18부터는 여러 작업을 동시에 준비하고 우선순위가 높은 작업을 먼저 처리합니다.

• 핵심 원리: 업데이트를 '긴급(Urgent)'과 '전환(Transition)'으로 구분하여, 긴급한 입력은 즉시 반영하고 무거운 작업은 백그라운드에서 준비합니다.

4. 구현 및 트러블슈팅

1) useTransition: 비긴급 업데이트 분리

입력값은 즉시 업데이트하되, 그로 인해 발생하는 무거운 리스트 필터링은 비긴급으로 처리합니다.

import { useState, useTransition } from 'react';

function SearchComponent() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [list, setList] = useState<string[]>([]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 1. 긴급 업데이트: 입력창 반응
    setQuery(e.target.value);

    // 2. 비긴급 업데이트: 무거운 작업 지연 처리
    startTransition(() => {
      const filtered = heavyFilterTask(e.target.value);
      setList(filtered);
    });
  };

  return (
    <div>
      <input type="text" onChange={handleChange} value={query} />
      {isPending ? <p>업데이트 중...</p> : <List items={list} />}
    </div>
  );
}

2) useId: SSR 호환 고유 ID 생성

서버와 클라이언트 사이의 ID 불일치(Hydration Mismatch) 문제를 해결합니다.

function FormField() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>이메일</label>
      <input id={id} type="email" />
    </div>
  );
}

5. 결과 및 Trade-off

정량적/정성적 성과

• 응답성 개선: 무거운 작업 중에도 사용자 입력이 끊기지 않고 즉각 반응합니다.
• 성능 최적화: 자동 배칭을 통해 불필요한 리렌더링 횟수를 대폭 줄였습니다.
• 스트리밍 SSR: 서버에서 준비된 부분부터 클라이언트로 전송하여 초기 로딩(TTFB)을 단축했습니다.

고려 사항

• 복잡도 증가: 우선순위를 직접 관리해야 하는 경우(useTransition, useDeferredValue) 코드 구조가 복잡해질 수 있습니다.
• 부수 효과(Side Effects): 동시성 렌더링 중에는 렌더링 단계가 여러 번 호출될 수 있으므로, 렌더링 함수 내부에서 부수 효과를 발생시키면 안 됩니다. (순수 함수 유지 필수)

6. 마치며

React 18은 단순한 버전 업을 넘어 렌더링 패러다임의 거대한 전환을 보여줍니다. 특히 Suspense와 동시성 모델은 앞으로의 React 생태계(Next.js App Router 등)의 근간이 되므로 반드시 숙지해야 할 개념입니다.

참고 자료:

• React 18 Release Note
• React 18 New Hooks API