react 19 activity 컴포넌트 사용법: 개념부터 실무 예제까지

react 19 activity 컴포넌트 사용법이 필요한 상황

react 19 activity 컴포넌트 사용법을 배우면 사용자 활동을 화면에 정확히 반영하고, 비동기 업데이트와 렌더링 경합을 줄이며 실무에서 안정적으로 상태를 관리할 수 있습니다. 이 글에서는 개념 이해, 실무 예제, 비교 기준, 체크리스트, 성능·보안·운영 주의점까지 다룹니다.

react 19 activity 컴포넌트 사용법 핵심 개념

React 19에서 소개된 Activity 컴포넌트는 사용자 활동(예: 읽기, 편집, 재생 등)을 추적하고 UI 상태 전환을 선언적으로 표현하는 작은 추상입니다. 기본 개념은 다음과 같습니다:

• Activity는 명시적 상태 머신 같은 역할을 하며, props로 상태와 콜백을 받습니다.
• 비동기 작업(promise, fetch 등)과 결합해 로딩/성공/실패 상태를 시각적으로 반영합니다.
• 렌더 성능을 위해 상태 전파를 최소화하고, 필요 시 세분화된 하위 Activity로 분리합니다.

핵심 용어 정리:

• active: 현재 활동 진행 중
• idle: 활동 없음
• suspended: 외부 요인으로 일시 중단

react 19 activity 컴포넌트 사용법 실무 예제

아래 예제는 간단한 CRUD 리스트에서 아이템 편집 활동을 Activity로 관리하는 방식입니다.

// 예시: ItemEditor.jsx
import React, { useState } from 'react';
// 가정: Activity 컴포넌트는 React 19에서 제공되는 API
import { Activity } from 'react-activity';

export default function ItemEditor({ item, onSave }) {
  const [title, setTitle] = useState(item.title);
  const [error, setError] = useState(null);

  async function handleSave() {
    try {
      setError(null);
      // Activity는 내부적으로 로딩/완료 상태를 관리
      await Activity.run(async () => {
        const res = await fetch(`/api/items/${item.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ title }),
        });
        if (!res.ok) throw new Error('저장 실패');
        const data = await res.json();
        onSave(data);
      });
    } catch (e) {
      setError(e.message);
    }
  }

  return (
    <div className="item-editor">
      <input value={title} onChange={e => setTitle(e.target.value)} />
      <Activity.WhenLoading>
        <button disabled>저장 중...</button>
      </Activity.WhenLoading>
      <Activity.WhenIdle>
        <button onClick={handleSave}>저장</button>
      </Activity.WhenIdle>
      {error && <div className="error">{error}</div>}
    </div>
  );
}

설명:

• Activity.run 내부에서 비동기 작업을 감싸면 로딩/성공/실패 상태를 자동으로 토글할 수 있습니다.
• UI는 Activity의 조건부 렌더링(예: WhenLoading, WhenIdle)을 사용해 간단히 관리됩니다.

언제 쓰면 좋고 언제 피해야 할까

언제 쓰면 좋은가

• 사용자 활동(편집, 업로드, 전송 등)을 명확히 시각화해야 할 때
• 비동기 작업 상태를 컴포넌트 범위에서 선언적으로 관리하고 싶을 때
• 복잡한 상태 전파를 줄여 컴포넌트 경계를 명확히 하고 싶을 때

언제 피해야 하는가

• 단순한 로컬 상태(단일 토글, 인풋 값)에 굳이 Activity 추상화를 도입할 때
• 외부 라이브러리나 전역 상태에서 이미 완전한 상태 머신을 사용 중일 때
• Activity API가 프로젝트 정책과 맞지 않거나 런타임 크기 증가가 민감한 경우

비교: Activity vs 기존 패턴

실무 체크리스트

• Activity API 버전이 프로젝트 정책과 호환되는가?
• Activity로 감쌀 비동기 경계가 명확한가(작업 단위별 분리)?
• 네트워크 실패/재시도 케이스를 고려했는가?
• 접근성(aria-live, focus 이동 등)을 처리했는가?
• 테스트(단위/통합)에서 Activity 상태 전환을 검증했는가?

성능·보안·운영 주의점

• 성능

  • Activity가 과도하게 높은 빈도로 상태를 갱신하면 렌더링 비용이 증가합니다. 세분화하여 필요한 컴포넌트에만 바인딩하세요.
  • 대량 리스트에서 각 항목에 Activity를 붙이면 메모리와 렌더링 비용이 커질 수 있으므로 virtualization과 조합하세요.

• 보안

  • Activity 내부에서 발생하는 에러 메시지에 민감한 정보를 노출하지 마세요. 서버 에러는 사용자 친화적 메시지로 변환해서 보여주기.
  • 네트워크 요청에서 CSRF/인증 토큰을 항상 검증하여 세션 하이재킹을 방지하세요.

• 운영

  • 로그와 모니터링: Activity 실패 빈도, 평균 지속 시간 등을 수집해 이상 패턴을 조기에 탐지하세요.
  • 점진적 도입: 큰 코드베이스는 기능 플래그로 단계별 활성화 후 롤백 계획을 준비하세요.

자주 묻는 질문

Q1: Activity는 전역 상태 관리(Redux, Zustand)와 충돌하나요?

A1: 충돌하지 않습니다. Activity는 UI 단위의 활동 추상화로, 전역 상태는 도메인 데이터를 담당합니다. 필요시 Activity 이벤트를 전역 상태로 브리지하세요.

Q2: Activity 내부 비동기 작업이 실패하면 자동으로 재시도되나요?

A2: 기본적으로 자동 재시도는 포함되지 않습니다. 재시도가 필요하면 Activity.run 내부에서 retry 로직을 직접 구현하거나, 재시도 유틸을 함께 사용하세요.

Q3: 서버 사이드 렌더링(SSR)에서 Activity를 어떻게 처리해야 하나요?

A3: SSR에서는 초기 렌더링에 활동 상태를 포함시키지 않는 것이 일반적입니다. 클라이언트에서 hydrate 후 Activity를 구동해 상태를 동기화하세요.

Q4: Activity를 사용하면 번들 크기가 크게 늘어나나요?

A4: Activity 구현에 따라 다릅니다. 경량 API를 사용하면 영향이 미미하지만, 대규모 라이브러리 의존 시 번들에 포함될 수 있으므로 번들 분석을 권장합니다.

정리

• react 19 activity 컴포넌트 사용법: 비동기 활동을 선언적으로 관리해 UI 복잡도를 줄임
• 언제 쓰면 좋은가: 명확한 사용자 활동 표시에 적합
• 언제 피해야 하는가: 단순 상태나 이미 다른 상태 머신을 사용할 때
• 실무 체크리스트와 성능·보안·운영 주의점을 반드시 검토 후 도입
• 예제 코드로 Activity.run과 조건부 렌더링 패턴을 적용해 빠르게 확인