빠른 요약

  • 고빈도 스트림에서 병목은 React 렌더 횟수보다 데이터가 픽셀이 되는 경로에 있을 수 있다. ring buffer와 OffscreenCanvas는 데이터 처리, UI 제어, 렌더링을 분리하는 방향을 보여 준다.
  • 실시간 차트, 운영 대시보드, 제어 화면을 만드는 팀은 고빈도 데이터가 메인 스레드를 점유해 입력 반응성을 떨어뜨리지 않도록 설계해야 한다.
  • 실시간 화면 하나를 프로파일링하고, 샘플 단위 state 업데이트에서 가장 뜨거운 canvas 영역을 분리하는 실험을 해 보세요.

무슨 일이 있었나

실시간 프런트엔드 성능 작업은 불필요한 렌더 몇 번을 줄이는 문제를 넘어섰다. 데이터가 계속 들어오면 어떤 업데이트가 UI 상태에 속하는지, 어떤 데이터가 렌더러로 직접 가는지, 어떤 작업이 상호작용을 막으면 안 되는지를 아키텍처에서 정해야 한다.

React의 고빈도 실시간 데이터 처리가 ring buffer와 OffscreenCanvas를 함께 다루는 이유도 여기에 있다. 데이터 소스에서 픽셀까지의 경로를 하나의 시스템으로 보라는 신호다.

React state가 고빈도 데이터 전송 경로가 되면 안 되는 이유

필터, 선택 상태, 연결 상태, 집계된 스냅샷처럼 UI 트리가 표현해야 하는 정보에는 state가 적합하다. 그러나 샘플마다 reconciliation이 일어나면 업데이트 비용이 메인 스레드의 입력 처리, layout, paint와 경쟁할 수 있다.

메인 UI와 분리된 렌더러에 데이터를 공급하는 ring buffer.
메인 UI와 분리된 렌더러에 데이터를 공급하는 ring buffer.

그렇다고 React를 배제할 필요는 없다. React는 제어 평면을 맡고, 지속적으로 바뀌는 데이터는 전용 렌더링 영역이 소유하도록 나누는 편이 실용적이다.

ring buffer는 이동하는 데이터 창에 맞는다

실시간 차트는 누적 전체 기록보다 최근 일정 시간 구간만 필요한 경우가 많다. ring buffer는 새 값을 순환 방식으로 오래된 값과 교체하므로 배열을 계속 키우는 방식보다 이 모델에 잘 맞는다.

다만 자료구조만으로 프레임이 부드러워지지는 않는다. 샘플링 주기, 집계 시점, 프레임 하나에 그릴 데이터량을 명시적으로 제한해야 한다.

OffscreenCanvas는 가속 버튼이 아니라 실행 경계다

OffscreenCanvas의 가치는 canvas 렌더링을 주 UI 작업과 분리할 수 있는 설계에 있다. React가 상호작용과 레이아웃을 처리하는 동안 렌더러는 별도의 갱신 주기를 유지할 수 있다.

컨텍스트 사이의 데이터 전달과 동기화 비용은 반드시 측정해야 한다. 그 비용이 메인 스레드에서 제거한 작업보다 작을 때만 복잡성이 정당화된다.

아키텍처를 바꾸기 전에 확인할 것

  • 입력 데이터율, frame time, 입력 지연을 분리해 측정한다.
  • 실제로 DOM에 들어가야 하는 데이터를 구분한다.
  • 시간 창이나 샘플링으로 표시 데이터량을 제한한다.
  • 전체 이전 전, 가장 뜨거운 영역에 격리된 렌더러를 시험한다.

5분 요약

  • 고빈도 스트림은 컴포넌트보다 파이프라인의 문제다.
  • React는 UI 제어를, 렌더러는 별도 데이터 경로를 맡을 수 있다.
  • ring buffer는 최근 데이터 창을 표시할 때 유용하다.
  • OffscreenCanvas는 종단 간 측정으로 평가해야 한다.

참고 자료

개발자가 주목해야 하는 이유

실시간 차트, 운영 대시보드, 제어 화면을 만드는 팀은 고빈도 데이터가 메인 스레드를 점유해 입력 반응성을 떨어뜨리지 않도록 설계해야 한다.

  1. 1실시간 화면 하나를 프로파일링하고, 샘플 단위 state 업데이트에서 가장 뜨거운 canvas 영역을 분리하는 실험을 해 보세요.