React 동시성 모드: 사용자 경험을 혁신하는 비결

안녕하세요, React 개발자 여러분! 웹 애플리케이션을 만들다 보면, 사용자 입력이 빈번하거나 대규모 데이터를 다룰 때 UI가 느려지거나 버벅이는 문제를 자주 마주치시죠? 사용자들은 언제나 빠르고 부드러운 경험을 기대합니다. 이러한 문제를 해결하고, 애플리케이션을 한 단계 업그레이드할 수 있는 React의 강력한 무기가 바로 동시성 모드(Concurrent Mode) 입니다.

이 글에서는 React 동시성 모드가 무엇인지, 왜 필요한지, 그리고 어떻게 사용자 경험을 혁신적으로 개선할 수 있는지 자세히 탐구해 보겠습니다. React 18부터 본격적으로 도입된 이 기능은 단순한 최적화가 아니라, 애플리케이션의 반응성을 재정의하는 패러다임입니다. 자, 그럼 시작해 볼까요?

728x90

동시성 모드, 왜 필요할까요?

전통적인 React 렌더링은 차단(blocking) 방식으로 작동합니다. 즉, 상태 업데이트나 컴포넌트 재렌더링이 발생하면 React가 그 작업을 완료할 때까지 다른 모든 작업이 대기해야 합니다. 이로 인해 데이터 페칭, 대량 목록 렌더링, 또는 복잡한 계산 같은 시간이 오래 걸리는 작업이 발생하면 전체 앱이 멈춘 듯 느껴집니다. 사용자 입장에서는 버튼 클릭에 즉시 반응하지 않거나, 스크롤이 끊기는 경험으로 이어지죠.

반면, 동시성 모드는 React가 여러 작업을 동시에(concurrency) 처리할 수 있게 해줍니다. 핵심은 우선순위 기반 스케줄링입니다. React는 업데이트를 일시 중지(pause)하고, 나중에 재개(resume)할 수 있으며, 사용자 입력처럼 긴급한 작업을 최우선으로 처리합니다.

예를 들어, 백그라운드에서 수천 개의 제품 데이터를 로드하는 동안 사용자가 검색어를 입력하면? 동시성 모드는 로딩 작업을 잠시 미루고 검색 입력을 즉시 반영합니다. 결과적으로, 앱은 항상 반응적(responsive) 으로 유지되며, 사용자 만족도가 크게 올라갑니다. 실제로, Google이나 Facebook 같은 대형 앱에서 이 기능을 통해 로딩 시간을 50% 이상 줄인 사례가 많아요!

동시성 모드의 핵심 개념 파헤치기

동시성 모드를 제대로 활용하려면 몇 가지 핵심 개념을 이해해야 합니다. 이 개념들은 React가 어떻게 더 유연하고 지능적으로 렌더링을 관리하는지 보여줍니다. 하나씩 살펴보죠.

1. 중단 가능한 렌더링 (Interruptible Rendering)

동시성 모드의 꽃입니다. React는 이제 렌더링 과정을 중단 가능하게 만듭니다. 더 높은 우선순위의 작업(예: 키보드 입력, 마우스 클릭)이 발생하면 현재 렌더링을 멈추고 그 작업을 먼저 처리한 후, 나중에 중단된 부분부터 이어갑니다.

예시 시나리오: 사용자가 긴 이미지 갤러리를 스크롤하는 동안 검색 바에 텍스트를 입력합니다. 동시성 모드에서는 갤러리 렌더링을 pause하고 입력을 즉시 처리해 검색 결과를 보여줍니다. 사용자는 "지연"을 느끼지 않고, 갤러리는 백그라운드에서 조용히 완성됩니다. 이 원칙 덕분에 사용자 경험 최우선(UX-first) 철학이 실현되죠.

2. 스케줄링 (Scheduling)

React의 스케줄러(Scheduler) 는 작업의 우선순위를 결정하는 '지휘자' 역할을 합니다. 작업은 긴급(Urgent), 보통(Normal), 아이들(Idle) 등으로 분류되며, 긴급 작업(사용자 입력, 애니메이션)은 즉시 실행됩니다.

비유하자면, 바쁜 교통 체증 속에서 구급차(긴급 작업)가 먼저 지나가도록 길을 터주는 시스템입니다. 이를 통해 React는 브라우저의 메인 스레드를 효율적으로 활용해, 앱이 "죽은" 느낌 없이 부드럽게 동작합니다.

3. 트랜지션 (Transitions)

트랜지션은 비긴급 업데이트를 표시하는 기능으로, startTransition API를 통해 구현합니다. 이 업데이트는 필요 시 중단될 수 있어, 더 중요한 작업을 방해하지 않습니다.

예시: 페이지 네비게이션(예: 카테고리 변경) 시, 트랜지션을 사용하면 버튼 클릭 같은 즉각적 피드백은 유지하면서 네비게이션을 백그라운드에서 처리합니다. 코드로 보면:

import { startTransition } from 'react';

function handleCategoryChange(newCategory) {
  startTransition(() => {
    setCategory(newCategory); // 이 업데이트는 중단 가능
  });
}

이렇게 하면 앱의 유동성(fluidity) 이 유지되어, SPA(Single Page Application)의 단점을 보완합니다.

4. Suspense

Suspense는 동시성 모드와 짝을 이루는 비동기 작업 관리자입니다. 데이터 페칭이나 코드 스플리팅(lazy loading) 시 UI를 차단하지 않고, 로딩 상태를 자연스럽게 처리합니다.

예시: React.lazy와 함께 사용하면:

import { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

컴포넌트가 로드될 때까지 "로딩 중..." 플레이스홀더가 보이므로, 빈 화면 문제를 피하고 사용자 경험이 부드러워집니다. 서버 사이드 렌더링(SSR)과도 잘 어우러져 스트리밍 렌더링을 지원합니다.

5. 동시성 기능 (Concurrent Features)

startTransition 외에도 useDeferredValue, useTransition 같은 훅들이 있습니다. 이들은 상태 업데이트의 우선순위를 세밀하게 제어해, 개발자가 앱의 반응성을 커스터마이징할 수 있게 합니다. 예를 들어, useDeferredValue는 입력 값을 지연 처리해 불필요한 재렌더링을 줄입니다.

이 개념들을 조합하면, React 앱이 마치 네이티브 앱처럼 느껴질 만큼 반응적입니다!

동시성 모드, 실제 예시로 이해하기

이론만으로는 부족하죠? 전자상거래 사이트에서 제품 목록을 로드하면서 장바구니 기능을 사용하는 시나리오로 실전 예제를 보겠습니다. 여기서 startTransition을 사용해 제품 로딩을 비긴급으로 처리합니다.

import { startTransition, useState, useEffect, useTransition } from 'react';

// 제품 가져오기를 시뮬레이션하는 함수
const fetchProducts = async () => {
  // 실제로는 API 호출
  await new Promise(resolve => setTimeout(resolve, 2000)); // 2초 지연 시뮬레이션
  return [
    { id: 1, name: '상품 1' },
    { id: 2, name: '상품 2' },
    // ... 더 많은 제품
  ];
};

function ProductList() {
  const [products, setProducts] = useState([]);
  const [isPending, startTransition] = useTransition(); // 트랜지션 훅 사용
  const [isAddingToCart, setIsAddingToCart] = useState(false);

  useEffect(() => {
    const loadProducts = async () => {
      const fetchedProducts = await fetchProducts();
      startTransition(() => {
        setProducts(fetchedProducts); // 트랜지션으로 감싸서 비긴급 처리
      });
    };
    loadProducts();
  }, []);

  const handleAddToCart = (productId) => {
    setIsAddingToCart(true);
    // 장바구니 추가 로직 (API 호출 시뮬레이션)
    setTimeout(() => {
      console.log(`${productId}를 장바구니에 추가했습니다.`);
      setIsAddingToCart(false);
    }, 500);
  };

  return (
    <div>
      <h1>제품 목록</h1>
      {isPending && <p>제품 로딩 중...</p>} {/* 트랜지션 pending 상태 표시 */}
      {isAddingToCart && <p>장바구니에 추가 중...</p>}
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name}
            <button onClick={() => handleAddToCart(product.id)}>
              장바구니에 추가
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

설명: 제품 로딩(fetchProducts)이 2초 걸리는 동안 사용자가 버튼을 클릭하면, startTransition 덕분에 로딩 작업이 pause되고 장바구니 추가가 즉시 처리됩니다. isPending으로 로딩 상태를 표시해 사용자에게 피드백을 주죠. 이 예제처럼 적용하면, 복잡한 앱에서도 지연이 느껴지지 않습니다.

결론: 동시성 모드로 더 나은 사용자 경험을!

React의 동시성 모드는 단순한 기능 추가가 아닙니다. 이는 대화형 웹 앱 개발의 패러다임 전환으로, 고급 스케줄링을 통해 반응성을 최우선으로 삼습니다. 중단 가능한 렌더링, 스케줄링, 트랜지션, Suspense 같은 도구를 활용하면, 아무리 데이터가 많아도 앱이 부드럽게 동작합니다.

현대 웹 개발자로서, 동시성 모드를 무시할 수 없죠. 지금 바로 기존 프로젝트에 적용해 보세요 – create-react-app으로 새 앱을 만들 때 --template 플래그로 React 18+를 사용하거나, 기존 앱을 업그레이드하면 됩니다. 사용자들은 더 이상 로딩에 지치지 않고, 당신의 앱을 즐겁게 탐색할 겁니다.