출처 : premieroctet.com - Activity, the new React component (2025.09.30)

React 카나리 채널에 새로 공개된 Activity 컴포넌트는 조건부 렌더링을 훨씬 간편하게 만들면서도, 화면에서 숨겨진 상태에서도 컴포넌트의 상태를 그대로 유지할 수 있게 해줍니다. 어떻게 작동하는지 살펴보겠습니다.

설치

먼저 Vite로 간단한 React 프로젝트를 만듭니다:

bun create vite@latest

package.json에서 React와 React DOM을 카나리 버전으로 업데이트해야 합니다.

활용 사례

다단계 폼을 관리하는 흔한 케이스를 구현해보겠습니다.

기본 사용법

지금까지는 보통 이렇게 처리했습니다:

// App.tsx
function App() {
  const [step, setStep] = useState(1);
  
  return (
    <div style={{...}}>
      <div style={{ display: 'flex', gap: '1rem' }}>
        <button type="button" onClick={() => setStep(1)}>
          Step 1
        </button>
        <button type="button" onClick={() => setStep(2)}>
          Step 2
        </button>
      </div>
      {step === 1 && <Step1 />}
      {step === 2 && <Step2 />}
    </div>
  );
}

// step1.tsx
const Step1 = () => {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      name="name"
      placeholder="Name"
    />
  );
};

// step2.tsx
const Step2 = () => {
  const [address, setAddress] = useState("");

 return (

  <input
    value={address}
    onChange={(e) => setAddress(e.target.value)}
    name="address"
    placeholder="Address"
   />
 ); 
};

이 코드는 동작하지만 중요한 UX 문제가 있습니다. 입력 필드에 값을 채우고 다음 단계로 넘어가면 입력 상태가 사라집니다. 컴포넌트가 언마운트되기 때문입니다. 상태 손실을 막으려면 컴포넌트를 언마운트하는 대신 숨겨서 React 트리에 계속 남겨두면 됩니다.

// App.tsx
function App() {
  const [step, setStep] = useState(1);

  return (
    <div
      style={{
        margin: "1rem",
        display: "flex",
        alignItems: "center",
        flex: 1,
        flexDirection: "column",
        gap: "1rem",
      }}
    >
      <div style={{ display: "flex", gap: "1rem" }}>
        <button type="button" onClick={() => setStep(1)}>
          Step 1
        </button>
        <button type="button" onClick={() => setStep(2)}>
          Step 2
        </button>
      </div>
      {/*  ==== 이 부분 ==== */}
      <div style={step === 2 ? { display: "none" } : {}}>
        <Step1 />
      </div>
      <div style={step === 1 ? { display: "none" } : {}}>
        <Step2 />
      </div>
     {/*   ============    */}
    </div>
  );
}

이 방식도 작동하지만 이상적이지 않습니다. 특히 컴포넌트에 부작용(side-effects), 이벤트 리스너, 비디오 같은 인터랙티브 콘텐츠가 있다면 더욱 그렇습니다. props를 통해 활성/비활성을 직접 관리해야 하고, useEffect나 useLayoutEffect 같은 훅도 그에 따라 제어해야 합니다. 가능하긴 하지만 복잡도가 급격히 증가합니다.

Activity 컴포넌트 등장

바로 이 지점에서 Activity 컴포넌트가 등장합니다. 역할은 단순합니다: DOM 노드를 display: none으로 숨기되, React 노드의 상태는 그대로 유지하고, 컴포넌트가 보일 때만 effect를 실행합니다. 사실상 컴포넌트를 "부분적으로" 마운트/언마운트할 수 있게 해줍니다.

function App() {
  const [step, setStep] = useState(1);

  return (
    <div
      style={{
        margin: "1rem",
        display: "flex",
        alignItems: "center",
        flex: 1,
        flexDirection: "column",
        gap: "1rem",
      }}
    >
      <div style={{ display: "flex", gap: "1rem" }}>
        <button type="button" onClick={() => setStep(1)}>
          Step 1
        </button>
        <button type="button" onClick={() => setStep(2)}>
          Step 2
        </button>
      </div>
      {/* ===== 이 부분 ===== */}
      <Activity mode={step === 1 ? "visible" : "hidden"}>
        <Step1 />
      </Activity>
      <Activity mode={step === 2 ? "visible" : "hidden"}>
        <Step2 />
      </Activity>
      {/* ================= */}
    </div>
  );
}

이제 step이 바뀌어도 텍스트 입력값이 보존됩니다. DOM을 검사해보면 숨겨진 input이 단순히 display: none 상태로 설정된 것을 볼 수 있습니다.

더 깊이 들어가서 effect가 어떻게 동작하는지 console.log로 확인해보겠습니다:

// step2.tsx
const Step2 = () => {
  const [address, setAddress] = useState("");
  
  useEffect(() => {
    console.log("Step2 mounted");
    return () => {
      console.log("Step2 unmounted");
    };
  }, []);
  
  useLayoutEffect(() => {
    console.log("Step2 layout mounted");
    return () => {
      console.log("Step2 layout unmounted");
    };
  }, []);
  
  return (
    <input
      value={address}
      onChange={(e) => setAddress(e.target.value)}
      name="address"
      placeholder="Address"
    />
  );
};

페이지를 새로고침하면 input이 DOM에 존재하는데도 로그가 하나도 출력되지 않습니다. step 2로 이동하면 그때 effect가 실행되고, step 1로 돌아가면 cleanup 함수가 호출됩니다.

사전 렌더링과 원격 데이터

원격 데이터를 가져올 때는 보통 useEffect를 사용합니다. 하지만 위에서 봤듯이 Activity로 감싼 숨겨진 컴포넌트에서는 effect가 실행되지 않습니다. 이럴 때는 use 훅을 사용할 수 있습니다:

// step2.tsx
const fetchAddress = new Promise<string>((resolve) => {
  resolve("Some street name");
});

const Step2 = () => {
  const addressData = use(fetchAddress);
  const [address, setAddress] = useState(addressData);
 
  return (
    <input
      value={address}
      onChange={(e) => setAddress(e.target.value)}
      name="address"
      placeholder="Address"
    />
  );
};

이렇게 하면 Step2가 인스턴스화되는 즉시 fetchAddress promise가 실행되고, 페이지 로드 시점에 resolved 값이 input에 나타납니다.

마무리

새로 나온 Activity 컴포넌트는 복잡한 케이스를 훨씬 직관적으로 처리할 수 있게 해줍니다. 사용법은 매우 직관적이지만, 기존 프로젝트에서는 effect 동작이 변경되는 부분을 중심으로 리팩토링이 필요할 수 있습니다.

참고 자료:

Activity 컴포넌트 공식 문서

[FE/react] 리액트의 새로운 컴포넌트 Activity