🎈 Chapter 7: 리액트 동시성

동기식 렌더링의 문제

간단히 말해 동기식 렌더링의 문제는 메인 스레드를 가로막아서 사용자 경험이 저한된다는 것입니다.

이 문제를 완화하는 방법으로 널리 사용되는 것 하나는 여러 업데이트를 일괄 처리해서 메인 스레드에서 수행되는 작업을 최소화하는 것입니다.

설계 측면에서 동기식 렌더링에는 우선순위라는 개념이 없습니다. 그래서 일괄 처리를 사용해 봤자 문제가 더 복잡해질 뿐입니다. 동기시 렌더링은 모든 업데이트를 동일하게 취급하고, 업데이트가 사용자에게 보이는지 여부를 따지지 않습니다.

리액트는 동시성 렌더링(concurrent rendering)을 사용해 업데이트 작업의 중요도와 긴급도에 따라 우선순위를 정하고, 중요한 업데이트가 덜 중요한 업데이트 때문에 가로막지 않도록 합니다. 이를 통해 리액트는 많은 작업량에도 불구하고 UI의 응답성을 유지하고, 더 나은 사용자 경험을 제공할 수 있습니다.

파이버 다시 보기

파이버 재조정자는 렌더링 프로세스를 파이버라고 하는 더 작고 관리하기 쉬운 작업 단위로 분할해 처리합니다. 그리고 리액트는 파이버를 활용해서 렌더링 작업을 일시적으로 중지하거나 재개하거나 우선순위를 설정해 중요도에 따라 업데이트를 지연하거나 예약합니다. 덕분에 애플리케이션의 응답성이 향상되고 덜 중요한 작업이 더 중요한 업데이트를 가로막는 일을 방지할 수 있습니다.

업데이트 예약과 지연

서버에서 새 메시지가 도착해 이를 렌더링해야 할 때, 리액트는 렌더 레인을 통해 렌더링하는데 이 레인은 동기식으로 DOM을 업데이트합니다. 다시 말해 다른 업데이트를 가로막게 되므로 사용자 입력에 지연이 발생합니다. 새 메시지 목록을 렌더링하는 작업의 우선순위를 낮추려면, 관련 상태 업데이트를 다음과 같이 useTransition 훅이 startTransition 함수로 감싸면 됩니다.

const ChatApp = () => {
  const [messages, setMessages] = useState([]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    const socket = new WebSocket("wss://your-websocket-server.com");
    socket.onmessage = (event) => {
      startTransition(() => {
        setMessages((prevMessages) => [...prevMessages, event.data]);
      });
    };

    return () => {
      socket.close();
    };
  }, []);

  const sendMessage = (message) => {
    // 메시지를 서버로 전송
  }

  return (
    <div>
      <MessageList messages={messages} />
      <MessageInput onSubmit={sendMessage} />
    </div>
  );
};

이를 통해 리액트는 메시지 목록 업데이트를 낮은 우선순위로 예약해서 UI를 가로막지 않고 렌더링하도록 설정합니다. 사용자 입력에 방해받지 않고, 수신되는 메시지는 사용자 상호 작용보다 낮은 우선순위로 처리되므로 사용자 경험에 큰 지장을 주지 않습니다.

더 깊이 들어가기

스케줄러

리액트는 재조정자 내에서 이 스케줄러를 사용합니다. 스케줄러와 재조정자는 렌더 레인을 통해 작업의 긴급도에 따라 우선순위를 설정하고 정리해 여러 작업이 협력하도록 합니다. 오늘날 리액트에서 스케줄러의 주된 기능은 마이크로태스크를 예약해서 메인 스레드의 제어를 관리하고 원활한 실행을 보장하는 것입니다.

마이크로태스크: 자바스크립트의 이벤트 루프에서 처리되는 작업 종류의 하나로, 현재 실행 중인 작업이 완료된 후 바로 실행되는 작업입니다. 마이크로태스크 큐로 관리됩니다.

스케줄러는 이름 그대로 함수가 속산 레인에 따라 함수를 실행하도록 예약하는 시스템입니다.

렌더 레인

렌더 레인은 리액트의 예약 시스템에서 중요한 요소로, 작업의 렌더링과 우선순위 관리를 효율화합니다. 레인은 우선순위 수준을 나타내는 단위로, 리액트가 렌더링 주기에서 처리할 수 있는 작업을 의미합니다.

렌더 레인은 리액트가 렌더링 과정에서 필요한 업데이트를 구성하고 우선순위를 설정하는 데 사용하는 가벼운 추상화입니다.
예를 들어 setState를 호출하면 해당 업데이트가 레인으로 보내집니다. 다양한 업데이트의 우선순위는 업데이트가 발생하는 콘텍스트에 따라 달리 이해하면 됩니다.

• setState가 클릭 핸들러 내부에서 호출되면, 해당 업데이트는 Sync 레인(우선순위 가장 높음)에 배종되며, 마이크로태스크로 예약됩니다.
• setState가 startTransition의 트랜지션 내에서 호출되면 트랜지션 레인(우선순위가 낮음)에 배치되고 마이크로태스크로 예약됩니다.

각 레인은 각기 다른 우선순위에 대응하며, 우선순위가 높은 레인은 우선순위가 낮은 레인보다 먼저 처리됩니다.

렌더 레인 작동 방식

컴포넌트가 업데이트되거나 새 컴포넌트가 렌더 트리에 추가되면, 리액트는 해당 업데이트의 우선순위에 따라 앞서 설명한 레인을 할당합니다. 우선순위의 업데이트 종류(사용자 상호 작용, 데이터 패치, 백그라운드 작업 등)와 컴포넌트 가시성 같은 요인에 따라 정해집니다.
이후 리액트는 다음 방식으로 렌더 레인을 사용해 업데이트를 예약하고 우선순위를 정합니다.

1. 업데이트 수집
   • 마지막 렌더링 이후에 예약된 모든 업데이트를 수집해서 우선순위에 따라 각 레인에 할당합니다.
2. 레인 처리
   • 우선순위가 가장 높은 레인부터 시작해 각 레인에 있는 업데이트를 처리합니다. 각 레인의 업데이트는 한꺼번에 일괄 처리합니다.
3. 커밋 단계
   • 모든 업데이트를 처리한 후, 커밋 단계로 진입해 변경 사항을 DOM에 적용하고, 효과를 실행하고, 기타 마무리 작업을 수행합니다.
4. 반복
   • 렌더링을 할 때마다 업데이트가 항상 우선순위대로 처리되도록 보장하고, 우선순위가 높은 업데이트가 우선순위가 낮은 업데이트에 의해 가로막지 않도록 합니다.

리액트는 우선순위에 따라 올바른 레인에 업데이트를 할당하고 수동 개입 없이도 애플리케이션이 효율적으로 작동하도록 합니다.
업데이트가 발생하면 리액트는 다음 단께를 수행해 우선순위를 결정하고 적절한 레인에 할당합니다.

1. 업데이트 콘텍스트 확인

• 업데이트가 발생한 콘텍스트를 평가합니다. 이 콘텍스트는 사용자 상호 작용, 상태 혹은 프롭 변경으로 인한 내부 업데이트, 서버 응답에 의한 업데이트일 수도 있습니다. 콘텍스트는 업데이트의 우선순위를 결정하는 데 중요합니다.

2. 콘텍스트에 따라 우선순위 추정

• 업데이트 우선순위는 콘텍스트에 따라 추정합니다. 예컨대 업데이트가 사용ㅇ자 입력의 결과라면 우선순위가 높을 것이며, 중요하지 않은 백그라운드 프로세스가 발생시킨 업데이트는 우선순위가 낮을 것입니다.

3. 우선순위 재정의가 있는지 확인

• 경우에 따라 개발자는 리액트의 useTransition 또는 useDeferredValue 훅을 사용해 업데이트 우선순위를 명시적으로 설정할 수 있습니다. 이렇게 우선순위가 재정의된 경우에는 추정한 우선순위 대신 명시적으로 설정된 우선순위를 사용합니다.

4. 올바른 레인에 업데이트 할당

• 우선순위가 결정된 후에는 해당 레인에 업데이트를 할당합니다. 이 과정을 앞서 살펴본 비트마스크를 사용해 이루어지며, 이를 통해 리액트는 여러 레인을 효율적으로 관리하고 업데이트가 올바르게 그룹화되고 처리되도록 보장합니다.

이 과정에서 리액트는 내부 휴리스틱과 업데이트가 발생하는 콘텍스트를 기반으로 우선순위에 대한 판단을 내립니다. 이러한 동적 우선순위 설정과 레인 할당을 통해 응답성과 성능 간에 균형을 잡고, 개발자의 직접적인 개입 없이도 애플리케이션이 효율적으로 동작하도록 보장합니다.

렌인 처리

각 레인에 업데이트가 할당되면 리액트는 우선순위에 따라 업데이트를 처리합니다.

리액트는 우선순위에 따라 업데이트를 처리함으로써 부하가 많은 상황에서도 애플리케이션의 핵심인 응답성을 유지하도록 보장합니다.

커밋 단계

모든 업데이트를 각 례인에서 처리한 후, 리액트는 커밋 단계로 진입해 변경 사항을 DOM에 적용하고 부작용을 실행하며 그 외 마무리 작업를 수행합니다.

이 과정은 책에서 다룰 수 있는 수준보다 훨씬 더 복잡합니다. 두 레인을 함께 처리해야하는 시점을 결정하는 얽힘 개념이나 이미 처리된 업데이트에 새로운 업데이트를 다시 적용할 시점을 결정하는 리베이스 같은 개념도 존재합니다. 리베이스는 트랜지션이 완료되기 전에 동기 업데이트가 발생해 트랜지션이 중단된 경우처럼, 두 업데이트를 함께 실행할 때 유용합니다.

효과의 플러싱 또는 내보내기도 이루어집니다. 동기식 업데이트가 발생할 때 리액트는 업데이트 전후에 대기 중인 효과를 한꺼번에 실행하고 처리해서 동기식 업데이트 상태 간에 일관성을 보장합니다.

useTransition

useTransition은 컴포넌트에서 상태 업데이트의 우선순위를 관리하고 우선순위가 높은 업데이트로 인해 UI가 응답하지 않는 것을 방지하는 강력한 리액트 훅입니다. 새로운 데이터를 로드하거나 여러 페이지를 이동하는 등 시각적으로 혼란을 줄 수 있는 업데이트를 처리할 때 매우 유용합니다.

useTransition에서 반환된 startTransition 함수로 감싸진 모든 업데이트는 트랜지션 레인에 들어갑니다. 트랜지션 레인은 Sync 레인보다 우선순위가 낮기 때문에, 이 특성을 활용해 업데이트 타이밍을 제어합니다. 이를 통해 높은 우선순위의 업데이트들이 메인 스레드에서 경쟁할 때도 사용자 경험이 원활합니다.

간단한 예시

import React, { useState, useTransition } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    doSomethingImportant();
    startTransition(() => {
      setCount(count + 1);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>증가</button>
      {isPending && <p>로딩 중...</p>}
    </div>
  );
}

export default App;

setCount 업데이트를 startTransition 함수로 감싸서 이 업데이트가 지연될 수 있음을 리액트에 알리고, 이를 통해 높은 우선순위의 업데이트가 동시에 발생한 경우 UI가 응답하지 못하는 문제를 방지합니다.

useDeferredValue

useDeferredValue는 특정 UI 업데이트를 나중으로 미루는 데 사용되는 리액트 훅으로, 애플리케이션이 과부화 작업이나 연산 집약적 작업을 처리할 때 유용합니다. 이를 통해 업데이트의 우선순위를 관리하고, 더 부드러운 전환과 개선된 사용자 경험을 제공하는 데 일조합니다.

초기 렌더링 중에 반환되는 지연된 값은 인수로 전달된 값과 동일합니다. 이후 업데이트에서는 useDeferredValue가 오래된 값을 더 오래 유지하고, 새 값으로 업데이트할 시점을 제어해 부드러운 사용자 경험을 유지하게 합니다. 특히 작업이 연산 집약적일 때 유용합니다. useDeferredValue는 이전 값과 새 값 사이에 렌더링이 여러 번 발생하지 않도록 동작합니다. 즉, 값이 바뀌어도 UI가 매번 새롭게 리렌더링되지 않습니다. 대신 새 값으로 업데이트될 시점을 제어해 한 번에 새 값으로 업데이트되기 합니다. 이 메커니즘은 stale-while-revalidate 전략과 유사하며, 새 값이 도착하기까지 이전 값을 유지함으로써 UI의 응답성을 높입니다.

useDeferredValue는 리액트 동시성 기능의 일부이며 특정 상태 업데이트를 지연하는 것은 물론 중단도 가능하게 합니다.

컴포넌트가 지연된 값으로 다시 렌더링되면, 리액트는 일정 시간동안 이전 값을 계속 표시하며 우선순위가 높은 업데이트가 우선순위가 낮은 업데이트보다 먼저 처리되도록 합니다. 이를 통해 렌더링 작업이 더 작은 조각으로 나누어지고 여러 시간으로 분산되어 응답성이 향상됩니다.

useDeferredValue의 목적

useDeferredValue의 주요 목적은 덜 중요한 업데이트의 렌더링을 지연하는 것입니다. 이는 사용자 상호 작용과 같은 더 중요한 업데이트를, 서버에서 가져온 데이터 표시와 같은 덜 중요한 업데이트보다 우선 처리하려고 할 때 특히 유용합니다.

import React, { memo, useState, useDeferredValue } from 'react';

function App() {
  const [searchValue, setSearchValue] = useState("");
  const deferredSearchValue = useDeferredValue(searchValue);

  return (
    <div>
      <input
        type="text"
        value={searchValue}
        onChange={(event) => setSearchValue(event.target.value)}
      />
      <SearchResults searchValue={deferredSearchValue} />
    </div>
  );
}

const SearchResults = memo(({ searchValue }) => {
  // 검색과 결과 렌더링 수행
})

useDeferredValue를 사용해 검색 결과의 렌더링을 지연함으로써 애플리케이션이 사용자의 입력을 먼저 처리하게 됩니다.

여기서 '그냥 searchValue에 디바운싱이나 스로틀링을 적용하면 되지 않을까요?'
이러한 방법은 특정 상황에서 효과적이지만, 개발자가 임의로 지연 시간을 설정해야합니다. 하지만 렌더링에 최적화에 더 특화된 useDeferredValue는 지연 시간을 사용자 기기의 성능에 맞춰 조정하며 임의로 설정할 필요가 없습니다. useDeferredValue는 이들 방식과 달리 지연 시간을 동적으로 조정하는 접근 방식을 취합니다.
뿐만 아니라 useDeferredValue는 지연된 렌더링을 중단할 수 있습니다. 예를 들어 리액트가 큰 목록을 처리하고 있는 도중에 사용자가 새로운 키 입력을 하면, 리액트는 렌더링을 일시 중지하고 새 입력에 응답한 후 백그라운드에서 렌더링을 다시 진행합니다.

useDeferredValue 사용 시기

useDeferredValue 사용을 고려할 만한 일반적인 사례는 다음과 같습니다.

• 대규모 데이터를 검색하거나 필터링할 때
• 복잡한 시각화나 애니메이션을 렌더링할 때
• 백그라운드에서 서버의 데이터를 업데이트할 때
• 사용자 상호 작용에 영향을 미칠 수 있는 연산 집약적 작업을 처리할 때

useDeferredValue가 적합하지 않은 경우

useDeferredValue가 특정 상황에서는 유용할 수 있지만, 이를 사용해 얻는 장점과 감수해야할 단점을 알아야 합니다. 업데이트를 지연하면 사용자에게 표시되는 데이터가 최신 데이터와는 다른, 오래된 데이터일 수 있브니다. 중요하지 않은 데이터라면 이러한 지연이 허용되겠지만, 사용자가 지연된 데이털르 보게 될 떄 발생할 영향에 대해서는 고려해야 합니다.

useDeferredValue의 사용 여부를 결정할 때 자문할 마땅한 질문은 '이 업데이트가 사용자 입력에 의한 것인가?'입니다.

동시성 렌더링 관련 문제

동시성 렌더링은 성능과 응답성을 높이지만, 개발자가 고려할 새로운 문제도 야기합니다. 그중 업데이트 처리 순서를 예측하기 어렵다는 가장 큰 문제는 예기치 않은 동작과 버그를 유발할 수 있습니다.

버그의 일종인 티어링(tearing)이라는 현상은 업데이트 순서가 어긋나면서 UI가 일관성을 잃게 되는 문제를 가리킵니다. 이 현상은 애플리케이션이 렌더링되는 동안 업데이트가 발생할 때, 컴포넌트가 일관되지 않은 데이터로 렌더링되면서 발생할 수 있습니다.

티어링

티어링은 애플리케이션을 렌더링하는 컴포넌트가 의존하고 있는 상태가 업데이트될 때 발생하는 버그입니다.

동기식 세계에서는 리액트가 컴포넌트 트리를 따라 위에서 아래로 이동하며 한 컴포넌트씩 차례로 렌더링합니다. 이렇게 하면 렌더링 과정에서 애플리케이션 상태가 항상 일관성을 유지합니다. 각 컴포넌트가 최신 상태를 기준으로 렌더링되기에 렌더링이 진행되는 동안 UI가 일관성을 잃지 않습니다.

<UserDetails id={user.id} />

렌더링하는 도중 전역 저장소에서 해당 사용자가 삭제되면 갑자기 오류가 발생해 사용자가 놀랄 수 있습니다. 티어링이 문제가 되는 이유입니다.

티어링 문제를 해결하기 위해 리액트는 useSyncExternalStore라는 훅을 제공합니다.

useSyncExternalStore

useSyncExternalStore는 애플리케이션의 내부 상태와 외부 상태를 동기화하는 리액트 훅입니다. 적절히 처리하지 않으면 티어링이 발생할 수 있는 고비용 계산 작업을 할 떄 특히 유용합니다. useSyncExternalStore라는 이름의 'sync'에는 두 가지 의미가 담겼습니다. 동기화(synchronize)와 동기적(synchronous)이라는 의미입니다. 다시 말해 외부 저장소에 변화해 발생할 때 동기적으로 업데이트를 강제해 일관성을 유지한다는 뜻입니다.

useSyncExternalStore 훅의 시그니처는 다음과 같습니다.

const value = useSyncExternalStore(store.subscribe, store.getSnapshot);

store.subscribe

유일한 인수로 콜백 함수를 받는 함수입니다. 이 함수 내부에서는 외부 저장소의 변경 사항을 구독하고 저장소에 변화가 생길 때마다 콜백 함수를 호출할 수 있습니다. 리액트는 이 콜백 함수 호출을 새 값을 사용해 컴포넌트를 리렌더링하라는 신호로 간주할 수 있습니다. 이 함수를 실행하면 정리 함수를 반환하는데 반환된 함수를 실행하면 외부 저장소의 구독을 취소합니다. 일반적인 subscribe 함수는 다음과 같습니다.

const store = {
  subscribe(rerender) {
    const newData = getNewData().then(rerender);
    return () => {
      // 구독 해제
    };
  },
};

subscribe 함수는 간단한 사용 사례는 resize 또는 scroll 이벤트와 같은 브라우저 이벤트를 구독하고 이러한 이벤트가 발생할 때 컴포넌트를 업데이트하는 것입니다.

const store = {
  subscribe(rerenderImmediately) {
    window.addEventListener("resize", rerenderImmediately);
    return () => {
      window.removeEventListener("resize", rerenderImmediately);
    };
  },
};

이제 브라우저 창 크기가 조정될 때마다 리액트 컴포넌트가 다시 렌더링됩니다. 하지만 새로 업데이트된 값은 어떻게 얻을까요? 바로 이 대목에서 useSyncExternalStore의 두 번째 인수가 필요합니다.

store.getSnapshot

외부 저장소의 현잿값을 반환하는 함수입니다. 이 함수는 컴포넌트가 렌더링될 때마다 호출되며, 반환된 값은 컴포넌트의 내부 상태를 업데이트하는 데 사용됩니다. 동기적으로 호출되므로 비동기 연산을 수행하거나 부작용이 있어서는 안 됩니다. 또 렌더링 시점에 상태의 일관성을 보장해서 여러 인스턴스의 컴포넌트가 동일한 상태를 갖습니다.
창 크기 조정 예시를 그대로 반영하여 현재 창 크기를 가져옵니다.

const store = {
  subscribe(immediatelyRerenderSynchronously) {
    window.addEventListener("resize", immediatelyRerenderSynchronously);
    return () => {
      window.removeEventListener("resize", immediatelyRerenderSynchronously);
    };
  },
  getSnapshot() {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }
};

여기서 { width, height } 객체는 창의 현재 상태를 나타내는 스냅숏이며, useSyncExternalStore가 반환하는 값입니다. 이 객체는 동시적 렌더링 상황에서도 여러 컴포넌트에서 일관성 있게 유지된다는 확인을 가지고 사용할 수 있습니다.
확신할 수 있는 근거가 무엇일까요? immediatelyRerenderSynchronously 함수가 동기식 리렌더링을 강제하고 리액트가 이 렌더링을 지연하지 못한다는 사실입니다. 이것이 바로 티어링 문제 해결의 핵심입니다.

useSyncExternalStore가 주요 작업을 수행하는 메커니즘은

• 동시적 렌더링에서 일관된 상태 보장하기
• 저장소가 변경될 때 동기적으로 리렌더링 강제 적용하기