React의 동시성 모드(Concurrent Mode): 사용자 경험을 혁신하는 비밀 무기

프론트엔드 개발자라면 사용자 경험(UX)을 향상시키기 위해 항상 고민합니다. 특히 복잡한 웹 애플리케이션에서 사용자 상호작용의 응답성을 유지하는 것은 큰 도전입니다. React 18에서 정식으로 도입된 '동시성 모드(Concurrent Mode)'는 이러한 고민을 해결하기 위한 React 팀의 혁신적인 접근법입니다.

---

동시성 모드란 무엇인가?

React의 동시성 모드는 여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 조정하여 먼저 처리하는 기능입니다.

이전의 React는 스택 구조로 동작했습니다. 즉, 한 번 렌더링을 시작하면 프로세스가 완료될 때까지 중단 없이 진행되어야 했습니다. 이는 마치 하나의 큰 작업을 처리하는 요리사가 중간에 들어온 긴급한 주문을 받을 수 없는 상황과 유사합니다.

반면 동시성 모드에서는 작업을 중간에 멈추거나 잠시 뒤로 미룰 수 있어, 중요한 작업이 들어오면 즉시 전환하여 처리할 수 있습니다. 마치 여러 요리를 동시에 준비하다가 VIP 고객의 주문이 들어오면 그것을 우선적으로 처리하는 숙련된 요리사와 같습니다.

// 기존 방식: 모든 상태 업데이트가 동일한 우선순위
setSearchQuery(input);  // 이 업데이트로 인해 무거운 렌더링이 발생할 수 있음

// 동시성 모드: 우선순위 지정 가능
// 입력은 즉시 반영, 결과 계산은 우선순위 낮게 설정
setSearchQuery(input);  // 높은 우선순위 (사용자 입력)
startTransition(() => {
  setSearchResults(calculateResults(input));  // 낮은 우선순위 (결과 계산)
});

---

동시성 모드의 핵심 기능

React는 동시성을 구현하기 위해 몇 가지 핵심 API를 제공합니다:

1. startTransition

startTransition을 사용하면 특정 상태 업데이트를 "덜 중요한 작업"으로 표시할 수 있습니다. 이렇게 하면 사용자 입력과 같은 중요한 업데이트가 항상 우선적으로 처리됩니다.

import { startTransition } from 'react';

// 사용자 입력 처리 (높은 우선순위)
function handleChange(e) {
  // 입력값 즉시 업데이트
  setInputValue(e.target.value);

  // 검색 결과는 낮은 우선순위로 업데이트
  startTransition(() => {
    setSearchResults(searchFunction(e.target.value));
  });
}

2. useDeferredValue

useDeferredValue 훅은 값의 업데이트를 일시적으로 지연시킬 수 있게 합니다. 사용자가 빠르게 입력할 때 모든 키스트로크마다 리렌더링하지 않고, 입력이 "안정화"된 후에 업데이트할 수 있습니다.

import { useDeferredValue } from 'react';

function SearchResults({ query }) {
  // query 값의 업데이트를 지연
  const deferredQuery = useDeferredValue(query);

  // deferredQuery를 기반으로 결과 계산
  // 입력 중에는 이전 결과를 계속 표시하다가
  // 입력이 잠시 멈추면 새 결과로 업데이트
  return <ExpensiveSearchResults query={deferredQuery} />;
}

---

동시성 모드가 필요한 상황

동시성 모드는 모든 상황에서 필요한 것은 아닙니다. 다음과 같은 특정 시나리오에서 특히 유용합니다:

1. 실시간 검색 및 필터링

사용자가 검색어를 입력할 때마다 결과가 실시간으로 업데이트되는 기능은 사용자 경험에 큰 영향을 미칩니다. 동시성 모드 없이는 타이핑할 때마다 화면이 버벅거릴 수 있지만, startTransition을 활용하면 입력은 즉각 반영하고 결과 업데이트는 백그라운드에서 처리할 수 있습니다.

2. 대용량 데이터 리스트

무한 스크롤이나 가상화된 목록에서 새 데이터를 로드하는 경우, 동시성 모드는 스크롤 동작을 부드럽게 유지하면서 데이터 로딩을 효율적으로 처리할 수 있게 합니다.

3. 애니메이션과 전환 효과

페이지 전환이나 복잡한 애니메이션이 있는 UI에서 동시성 모드를 사용하면 메인 스레드가 차단되지 않아 애니메이션이 더 부드럽게 실행됩니다.

4. 사용자 인터랙션 개선

버튼 클릭과 같은 사용자 상호작용 시 UI는 즉각적으로 반응하고, 무거운 데이터 처리는 뒤로 미루어 전체적인 응답성을 향상시킬 수 있습니다.

시나리오	기존 방식	동시성 모드 사용 시
검색 기능	타이핑 지연, 화면 버벅임	입력 즉시 반영, 결과는 백그라운드에서 처리
대용량 리스트	스크롤 시 프레임 드롭	스크롤 우선 처리, 데이터 로딩은 후순위
페이지 전환	전환 중 UI 프리징	애니메이션 부드럽게 유지, 데이터 로딩은 병렬 처리

---

주의사항과 모범 사례

동시성 모드가 강력하긴 하지만, 몇 가지 주의할 점이 있습니다:

1. 선택적 적용: 모든 컴포넌트나 상태 업데이트에 무분별하게 적용하면 오히려 성능이 저하될 수 있습니다. 필요한 부분에만 적용하세요.

2. 사이드 이펙트 주의: 트랜지션 내부의 코드는 여러 번 실행될 수 있으므로, 네트워크 요청과 같은 사이드 이펙트는 적절히 처리해야 합니다.

3. 사용자 피드백: 특히 startTransition을 사용할 때는 isPending 상태를 활용하여 작업이 진행 중임을 사용자에게 알려주는 것이 좋습니다.

import { startTransition, useTransition } from 'react';

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

  function handleChange(e) {
    // 입력은 즉시 업데이트
    setQuery(e.target.value);

    // 결과 계산은 낮은 우선순위로
    startTransition(() => {
      setResults(search(e.target.value));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? (
        <p>검색 중...</p>
      ) : (
        <ResultsList results={results} />
      )}
    </>
  );
}

---

결론: 더 나은 사용자 경험을 위한 혁신

React의 동시성 모드는 복잡한 웹 애플리케이션에서 사용자 경험을 획기적으로 개선할 수 있는 강력한 도구입니다. 우선순위를 기반으로 렌더링 작업을 인터리빙함으로써, 중요한 사용자 상호작용은 항상 빠르게 응답하면서도 무거운 업데이트를 효율적으로 처리할 수 있게 해줍니다.

동시성 모드는 단순히 성능 최적화 기술이 아니라, 사용자 중심의 UI를 구축하기 위한 React의 철학적 접근법을 반영합니다. 적절한 상황에서 이러한 동시성 패턴을 적용함으로써, 개발자는 더 반응성이 뛰어나고 부드러운 웹 애플리케이션을 만들 수 있습니다.

앞으로 React가 더 발전함에 따라 동시성 모드와 관련된 API와 패턴도 함께 발전할 것입니다. 지금부터 이러한 개념을 이해하고 활용하는 것은 미래 웹 개발의 중요한 경쟁력이 될 것입니다.

---

참고 자료

• React 공식 문서 - 동시성
• React 18 업그레이드 가이드
• React Conf 2021 - 동시성 소개