React의 새로운 <Activity> 컴포넌트 심층 분석
Source: Dev.to
Introduction
앱에서 탭을 떠났다가 다시 돌아왔을 때 스크롤 위치가 사라지거나, 입력 필드가 비워지거나, 로딩 스피너가 다시 나타나는 경험을 해본 적 있나요?
전통적으로 React 개발자들은 “보이기/숨기기” UI를 조건부로 마운트하거나 언마운트하는 방식으로 처리했습니다:
{isShowingSidebar && <Sidebar />}효과적이긴 하지만, 이 방법은 언마운트될 때마다 컴포넌트 상태를 파괴합니다. 최신 React(v19+)에서는 더 나은 방법이 있습니다. 바로 <Offscreen> 컴포넌트입니다.
실험 단계에서는 “Offscreen” API로 알려졌던 <Offscreen>은 내부 상태나 DOM 노드를 잃지 않고 UI를 숨기고 복원할 수 있게 해주는 내장 React 컴포넌트입니다. 요소를 트리에서 제거하는 대신, <Offscreen>은 요소를 배경에서 “활성화된” 상태로 유지하지만 시각적으로는 숨깁니다.
The Basic Syntax
import { Offscreen } from 'react';
import { useState } from 'react';
function App() {
const [isVisible, setIsVisible] = useState(true);
return (
<Offscreen mode={isVisible ? "visible" : "hidden"}>
{/* Your component tree */}
</Offscreen>
);
}Preserving “Ephemeral” State
<Offscreen>은 JavaScript 상태뿐 아니라 DOM 상태도 보존합니다.
- Form Drafts – 사용자가 폼에 입력하고 탭을 전환한 뒤 다시 돌아오면 텍스트가 그대로 유지됩니다.
- Scroll Position – 요소가 제거되지 않았기 때문에 브라우저가 자동으로 스크롤 위치를 유지합니다. 이제 별도의 “스크롤 복원” 로직이 필요 없습니다.
Intelligent Pre‑rendering
<Offscreen mode="hidden">
{/* Heavy component that can be pre‑rendered */}
</Offscreen>숨겨진 <Offscreen> 경계 안에 컴포넌트가 있을 때:
- React는 낮은 우선순위로 렌더링하여 메인 스레드를 차단하지 않게 합니다.
use와 같은 Suspense‑enabled 소스를 사용한다면 데이터를 미리 가져올 수 있습니다.useEffect는 컴포넌트가 실제로 보이게 될 때까지 실행되지 않습니다.
Faster Initial Hydration
How does it differ from display: none?
<Offscreen>은 내부적으로 display: none을 사용해 요소를 숨기지만, 여러 “React Intelligence” 레이어를 추가합니다:
- Effect Orchestration –
mode="hidden"일 때 React는useEffect정리 함수를 파괴하고, 컴포넌트가 보이게 될 때만 다시 실행합니다. 이는 백그라운드 컴포넌트가 타이머나 구독을 실행해 리소스를 소모하는 것을 방지합니다. - Priority Management – 숨겨진
<Offscreen>내부 업데이트는 우선순위가 낮아집니다. 백그라운드 재렌더링이 포그라운드 UI에서 프레임 드롭을 일으키지 않게 합니다. - View Transitions – View Transition API와 통합되어 콘텐츠가 들어오거나 나갈 때 부드러운 애니메이션을 제공합니다.
- Ref Behavior – DOM 노드가 여전히 존재하므로 ref는 숨겨진 요소를 계속 가리킵니다.
- Text‑only Components – 컴포넌트가 텍스트만 반환하고(래퍼 요소가 없을 경우)
<Offscreen>은 숨겨질 때 아무 것도 렌더링하지 않습니다. 적용할display: none대상이 없기 때문입니다. - Side Effects –
useEffect밖에 있는 부수 효과(예: 자동 재생<video>)는 백그라운드에서 계속 실행될 수 있습니다. 컴포넌트를 “잘 동작하도록” 설계하세요.
When to Use <Offscreen>
<Offscreen> 컴포넌트는 “Agentic” UI를 향한 큰 도약입니다—앱이 백그라운드에서 콘텐츠를 준비하고 사용자가 떠난 정확한 위치를 기억하도록 합니다. 다음과 같은 경우에 활용해 보세요:
- 복잡한 대시보드
- 다중 탭 인터페이스
- 성능이 무거운 웹 애플리케이션
이제 언마운트를 멈추고 <Offscreen>을 사용해 보세요.
탭을 <Offscreen>으로 리팩터링할 계획이 있나요? 댓글로 알려주세요!