⚡ React 19.2의 <Activity>

React 19.2부터 새로운 컴포넌트 <Activity>가 추가되었습니다.

<Activity>가 무엇인지, 기존 방식(조건부 렌더링)과 무엇이 다른지 예제 코드로 비교를 해보겠습니다

---

🧩 기존 방식 — 조건부 렌더링으로 보이기/숨기기

이전에는 특정 UI를 보여줄 때 이렇게 했습니다.

import React, { useState } from 'react';

function BeforeActivityInput() {
    const [isVisible, setIsVisible] = useState(true);

    return (
        <div style={{ padding: '20px' }}>
            <h2>🧱 Before: 조건부 렌더링 방식</h2>

            <button onClick={() => setIsVisible((prev) => !prev)}>
                {isVisible ? '숨기기' : '보이기'}
            </button>
            {isVisible && (
                <div style={{ marginTop: '20px' }}>
                    <input defaultValue="Hello World" />
                </div>
            )}
        </div>
    );
}

export default BeforeActivityInput;



| 문제                                  | 설명                                    
| ------------------------------------------------------------------------- 
| 💀 **언마운트 타이밍 직접 제어 불가**         `isVisible`이 `false`가 되는 즉시 컴포넌트가 사라짐 
| 💾 **상태 유지 불가**                     컴포넌트가 다시 마운트되면 내부 상태가 초기화됨            
| ⚙️ **Suspense, Transition과 연동 어려움**  React의 최신 기능과 따로 동작함

⚡ React 19.2 — 새로운 Activity 등장 개선

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

function AfterActivityInput() {
    const [isVisible, setIsVisible] = useState(true);

    return (
        <div style={{ padding: '20px' }}>
            <h2>⚡ After: Activity 컴포넌트 방식</h2>

            <button onClick={() => setIsVisible((prev) => !prev)}>
                {isVisible ? '숨기기' : '보이기'}
            </button>

            <Activity mode={isVisible ? 'visible' : 'hidden'}>
                <div style={{ marginTop: '20px' }}>
                    <input defaultValue="Hello World" />
                </div>
            </Activity>
        </div>
    );
}

export default AfterActivityInput;

장점

<Activity mode={isVisible ? 'visible' : 'hidden'}>
    <input defaultValue="Hello World" />
</Activity>

해당 코드에서 isVisible이 false가 되어도
input에 입력한 값은 그대로 유지됩니다.
조건부 렌더링({isVisible && <input" />})에서는
컴포넌트가 언마운트되어 입력 내용이 사라진다

GPT에게 물어본 차이점 및 장단점