리액트 18의 동시성 모드 이해하기

리액트 18에서 새롭게 도입된 동시성 모드에 대해 공부할 기회가 있었습니다. 사실 이전에는 동시성에 대해 잘 알지 못했지만, 이번 학습을 통해 중요한 개념과 활용 방법을 이해할 수 있었습니다. 이 글에서는 제가 학습한 내용을 정리하며, 동시성 모드의 개념부터 활용 사례, 그리고 사용 시 주의해야 할 점까지 공유해보려고 합니다.

동시성 모드란 무엇인가요?

리액트의 이전 버전에서는 작업을 처리하는 방식이 스택 구조로 이루어져 있었습니다. 즉, 렌더링이 시작되면 모든 작업을 끝까지 마쳐야만 했습니다. 하지만 동시성 모드에서는 작업을 중단하거나 잠시 뒤로 미루고, 더 중요한 작업을 먼저 수행할 수 있습니다. 이를 통해 사용자 경험이 더욱 매끄럽고 반응성이 좋아진다는 것을 알게 되었습니다.

동시성 모드의 원리

제가 이해한 바로는 동시성 모드의 핵심은 중요한 작업과 덜 중요한 작업을 분리하는 것입니다. 덜 중요한 작업은 백그라운드에서 진행되며, 중요한 작업이 사용자에게 즉시 반영됩니다.

예시

검색창에 입력하는 동작을 예로 들어보겠습니다. 사용자가 입력한 검색어에 따라 검색 결과가 업데이트될 때, 이전에는 입력할 때마다 렌더링이 발생해 화면이 느려질 수 있었습니다. 하지만 동시성 모드를 활용하면 검색 결과 업데이트는 백그라운드에서 처리되며, 사용자의 입력 동작은 매끄럽게 유지됩니다.

동시성을 활용한 주요 기능

제가 학습하며 알게 된 주요 기능으로는 startTransition과 useDeferredValue가 있었습니다.

1. startTransition

startTransition은 특정 상태 업데이트를 덜 중요한 작업으로 분류하여 사용자 상호작용 같은 중요한 작업이 먼저 처리되도록 합니다.

import { useState, startTransition } from 'react';
 
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
 
  const handleChange = (event) => {
    const value = event.target.value;
    setQuery(value);
 
    // 검색 결과 업데이트는 덜 중요한 작업으로 처리
    startTransition(() => {
      const filteredResults = fetchSearchResults(value);
      setResults(filteredResults);
    });
  };
 
  return (
    <div>
      <input type='text' value={query} onChange={handleChange} />
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

2. useDeferredValue

useDeferredValue는 값의 업데이트를 잠시 지연시켜, 빈번한 렌더링을 방지하고 성능을 최적화할 수 있습니다.

import { useState, useDeferredValue } from 'react';
 
function SearchComponent() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
 
  const results = fetchSearchResults(deferredQuery);
 
  return (
    <div>
      <input
        type='text'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

동시성 모드의 장점

학습을 진행하면서 동시성 모드가 사용자 경험을 크게 향상시킨다는 점을 알게 되었습니다.

반응성 향상: 사용자 상호작용(스크롤, 입력 등)이 더 매끄럽게 작동합니다.
작업 우선순위 설정: 중요한 작업과 덜 중요한 작업을 분리하여 효율적으로 처리합니다.
백그라운드 처리: 덜 중요한 작업을 비동기로 처리하여 화면이 느려지는 것을 방지합니다.

예시: 스크롤과 데이터 로딩

긴 목록을 스크롤하면서 데이터를 로딩하는 경우, 스크롤이 중요한 작업이므로 이를 우선 처리하고 데이터 로딩은 백그라운드에서 진행합니다.

import { useState, startTransition } from 'react';
 
function InfiniteScrollList() {
  const [items, setItems] = useState(initialItems);
 
  const loadMore = () => {
    startTransition(() => {
      const newItems = fetchMoreItems();
      setItems((prevItems) => [...prevItems, ...newItems]);
    });
  };
 
  return (
    <div onScroll={handleScroll(loadMore)}>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

주의할 점

동시성 모드가 강력한 기능이지만, 사용 시 주의해야 할 점도 있다는 것을 학습했습니다.

과도한 사용: 모든 컴포넌트에 동시성을 적용하면 오히려 성능 저하를 유발할 수 있습니다.
필요한 경우에만 사용: 사용자의 상호작용이 빈번하거나 응답성이 중요한 경우에만 적용해야 합니다.

동시성이 필요한 상황

동시성이 필요하다고 느껴지는 대표적인 상황은 아래와 같습니다.

검색 필터링 및 자동 완성: 입력할 때마다 렌더링이 발생하지 않고 입력이 부드럽게 유지됨.
무거운 데이터 로딩: 스크롤을 우선 처리하고 데이터 로딩은 백그라운드에서 진행.
애니메이션: 사용자 클릭에 즉각적으로 반응하고 비동기 작업은 나중에 처리.

요약 및 느낀점

요약

이번 학습을 통해 알게 된 것은 리액트 18의 동시성 모드가 작업 우선순위를 관리하여, 사용자 경험을 향상시키는 기능에 대해 알게 되었습니다. startTransition과 useDeferredValue 같은 도구를 활용하면 사용자의 상호작용을 매끄럽게 유지하면서도 덜 중요한 작업을 백그라운드에서 처리할 수 있었습니다. 하지만 과도한 사용은 오히려 성능 저하를 유발할 수 있으므로 필요한 경우에만 적용하는 것이 중요하다는 것도 배웠습니다.

느낀점

이번 기회에 리액트의 동시성 모드를 학습하면서, 이 기능이 사용자 경험을 크게 향상시킬 수 있다는 점이 정말 인상적이었습니다. 특히 사용자와의 상호작용이 많은 애플리케이션에서 어떻게 적용하면 좋을지 더 확인하고 적용하고 싶습니다.

React Concurrency