react 19 - Activity

Activity

상황: 필터 전환 시 무거운 테이블 컴포넌트를 전환해야 했다.

{activeTab === 'ALL' ? <Table type="ALL" /> : null}

문제 1: INP 지연

필터를 클릭하면 테이블 렌더가 필터 렌더를 블록하여 유저 입장에서 반응이 느리게 느껴진다.

해결 방안: useDeferredValue를 사용하면 같은 값의 지연된 버전을 만들 수 있고, 긴급한 업데이트(필터 UI)를 먼저 처리한 후 무거운 업데이트(테이블)를 나중에 처리할 수 있다.

문제 2: 마운트 비용

문제 1은 UI 응답성을 개선하지만, 조건부 렌더링으로 인한 매번 언마운트/마운트되는 비용 자체는 해결하지 못한다.

해결 방안 (React 18): display: none으로 언마운트를 방지하고, useQuery enabled: false 등으로 side effect를 수동 제어할 수 있다. 하지만 자식 컴포넌트마다 이를 신경써야 하는 부담이 있다.

해결 방안 (React 19.2): 문제 2를 한 번에 해결해 주는 게 Activity 컴포넌트다. 이 컴포넌트는 '상태는 살려두고 side effect만 죽이는' 것을 React 내부 스케줄러 레벨에서 수행한다. 추가로 hidden 상태의 컴포넌트에 발생하는 업데이트는 자동으로 가장 낮은 우선순위로 처리하여 성능을 개선할 수 있다.

Activity 컴포넌트는 익히 알고 있었지만 제대로 이해하지 못했는데, 이번 기회에 어떤 상황에 사용하면 좋은지 알 수 있었다.