기존 조건부 렌더링의 문제점

UI를 숨기거나 표시할 때 가장 흔히 사용하는 패턴이다.

{isShowingSidebar && (
  <Sidebar />
)}

또는 팀에 따라 <If> 컴포넌트를 만들어 처리하기도 했다.

이 방식의 문제는 조건이 false가 되는 순간 컴포넌트가 언마운트되어 내부 상태가 초기화된다는 점이다. 이로 인해 세 가지 문제가 발생한다.

상태 초기화 문제 (예를 들어, 사용자가 입력하던 검색어, 스크롤 위치, 선택 값 등 모두 사라진다.)
재마운트 비용 (다시 표시할 때마다 컴포넌트를 처음부터 렌더링하고 데이터를 다시 불러와야 한다.)
애니메이션 단절 (숨김/표시 전환 시 자연스러운 트랜지션 처리가 어렵다.)

<Activity> 컴포넌트 등장

위 문제들을 해결하기 위해 React 19에서 <Activity> 컴포넌트가 도입됐다.

import { unstable_Activity as Activity } from 'react';

<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
  <Sidebar />
</Activity>

mode prop에 따라 동작이 달라진다.

mode	동작
`"visible"`	정상적으로 렌더링되어 화면에 표시
`"hidden"`	DOM에서 숨겨지지만 언마운트되지 않음

mode="hidden" 상태에서 일어나는 일

function Sidebar() {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <input
      value={searchQuery}
      onChange={e => setSearchQuery(e.target.value)}
    />
  );
}

Sidebar가 hidden 상태가 되어도 React는 searchQuery를 비롯한 내부 상태를 메모리에 그대로 유지한다. 다시 visible로 전환되면 이전 상태 그대로 즉시 렌더링된다.

Effect 라이프사이클과의 연동

<Activity>는 useEffect의 cleanup 사이클과도 통합되어 있다.

useEffect(() => {
  const ws = new WebSocket('wss://...');

  return () => {
    ws.close(); // hidden 전환 시 cleanup 실행
  };
}, []);

<Activity>는 visible → hidden 전환 시 cleanup을 hidden → visible 전환 시 effect를 다시 실행할 시점을 트리거해준다.

Concurrent 렌더링 최적화

Concurrent Mode는 React가 렌더링 작업을 중단하고 재개할 수 있게 해주는 기능이다.

<Activity>는 이 기능과 통합되어 hidden 상태의 컴포넌트는 낮은 우선순위로 백그라운드에서 렌더링된다. 현재 화면에 보이는 UI를 방해하지 않으면서 숨겨진 컴포넌트를 미리 준비해둘 수 있다.

마무리

<Activity>는 메모리를 더 사용하는 대신 상태를 보존하는 트레이드오프다. 탭이나 사이드바처럼 사용자가 돌아왔을 때 이전 상태가 그대로 있어야 하는 경우라면 충분히 쓸만한 선택지라고 생각한다.

React19 Activity 컴포넌트