[2025.10.10 주간 개발 트렌드] AgentKit과 Apps SDK 정리 (워크플로, UI, 평가)

![주간 개발 트렌드](https://librarian-blog-images.s3.ap-northeast-2.amazonaws.com/b28d786c-9ec3-46ec-8055-adcd53a303c5_thumbnail_2.png)

# React에서 화면을 숨기는 방법이 하나 더 생겼다

탭을 전환했다가 돌아왔는데 입력한 검색어가 사라지는 경우가 있다. 반대로 상태를 남기려고 화면을 숨겨두면 보이지 않는 컴포넌트의 구독이나 타이머까지 계속 실행되기도 한다.

이번주 10월 1일에 [React 19.2](https://react.dev/blog/2025/10/01/react-19-2)가 출시됐다. Activity와 useEffectEvent, cacheSignal, Performance Tracks 등이 추가됐고 서버 렌더링도 개선됐다.

이번주에는 새로운 이름을 전부 외우기보다 UI의 상태와 실행 범위를 어떻게 관리할 수 있는지 정리해보려고 한다.

# 1. 우선 화면을 숨긴다는 의미부터 보자

조건부 렌더링으로 컴포넌트를 제거하는것과 CSS로 보이지 않게 하는것은 다르다.

```jsx
{activeTab === 'search' && <SearchPanel />}
```

위처럼 조건이 false가 되면 SearchPanel은 트리에서 제거된다. 다시 나타날때는 새로 마운트되므로 내부 상태도 처음부터 시작한다.

display: none으로 숨기면 DOM과 상태는 남지만 Effect도 그대로 유지될 수 있다. 화면에는 없는데 이벤트를 구독하거나 일정 시간마다 작업하는 상황이 생기는것이다.

그래서 필요한 동작을 나눠서 생각해보면 좋겠다. 검색어는 유지하고싶지만 숨겨진 화면의 실시간 연결까지 계속 유지할 필요는 없을 수 있다.

# 2. Activity는 어떤 차이가 있나

[Activity](https://react.dev/reference/react/Activity)는 자식의 UI와 상태를 유지하면서 표시 여부를 관리한다. hidden 상태에서는 화면을 숨기고 Effect를 정리하며, 다시 visible이 되면 Effect를 실행한다.

```jsx
import { Activity } from 'react';

function Workspace({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'search' ? 'visible' : 'hidden'}>
        <SearchPanel />
      </Activity>
      <Activity mode={activeTab === 'saved' ? 'visible' : 'hidden'}>
        <SavedPanel />
      </Activity>
    </>
  );
}
```

위의 코드는 탭 두개를 각각 Activity로 감싼 예시다. SearchPanel에서 입력한 값을 유지하면서 다른 탭을 보여주는 구조를 생각할 수 있다.

hidden 상태의 업데이트는 낮은 우선순위로 처리된다. 완전히 실행이 멈춘 별도 프로세스처럼 이해하면 안된다. 화면을 유지하는만큼 메모리 사용량도 같이 생각해야한다.

또한 Activity 자체를 조건부로 제거하면 그 안의 상태까지 계속 보관되는것은 아니다. 상태가 유지되는 범위는 React 트리에서 해당 경계가 남아있는지와 연결된다.

Effect에 정리 함수가 없다면 숨겼다가 다시 보여줄때 문제가 드러날 수 있다. 구독을 생성했다면 해제하고, 타이머를 만들었다면 정리하는 기본 동작부터 확인해야겠다.

# 3. useEffectEvent는 의존성을 지우는 도구일까

Effect 안에서 최신 값을 읽고싶지만 그 값이 바뀔때마다 외부 시스템과 다시 연결할 필요는 없는 경우가 있다. 이때 반응해야하는 부분과 이벤트처럼 실행할 부분을 구분할 수 있다.

[useEffectEvent](https://react.dev/reference/react/useEffectEvent)는 이런 Effect 내부의 이벤트 로직을 분리하기 위한 Hook이다. 최신 props와 state를 읽을 수 있지만 모든 의존성 문제를 숨기는 용도로 쓰면 안된다.

예를 들어 페이지 방문을 기록하면서 현재 장바구니 개수도 같이 남긴다고 해보자. 페이지가 바뀌면 방문 기록이 필요하지만, 상품을 추가했다고 같은 페이지 방문을 다시 기록할 필요는 없을 수 있다.

```jsx
function VisitReporter({ pageId, cartSize }) {
  const onVisit = useEffectEvent((id) => {
    reportVisit(id, cartSize);
  });

  useEffect(() => {
    onVisit(pageId);
  }, [pageId]);

  return null;
}
```

위의 코드는 해당 Hook들을 import하고 reportVisit을 구현했다는 전제의 예시다. 무엇을 변화의 기준으로 볼지 먼저 정해야 코드의 의도가 명확해진다.

Effect Event는 Effect 안에서 사용하는 로직이다. 일반 클릭 핸들러나 다른 컴포넌트에 전달할 함수를 전부 이 Hook으로 감쌀 필요는 없다. 관련 lint 규칙도 함께 맞춰서 잘못된 사용을 확인하면 좋겠다.

# 4. 서버 렌더링과 성능 분석도 넓어졌다

이번 버전에는 일부 화면을 미리 렌더링하고 나중에 이어서 처리하는 prerender/resume 기능도 들어왔다. 정적인 부분과 요청에 따라 달라지는 부분을 나눠 다룰 수 있는 기반이다.

다만 React에 API가 추가됐다는것과 사용중인 프레임워크에서 바로 같은 설정으로 사용할 수 있다는것은 다르다. 실제 SSR 구성과 프레임워크의 지원 범위를 같이 확인해야한다.

cacheSignal도 일반적인 브라우저 캐시 만료 기능으로 보면 헷갈린다. React Server Components에서 캐시 작업의 수명이 끝났을때 관련 작업을 중단하거나 정리하는데 사용하는 기능이다.

Performance Tracks는 Chrome DevTools의 성능 기록에서 React의 스케줄링과 컴포넌트 작업을 살펴볼 수 있도록 돕는다. 느린 화면을 추측으로 고치는 대신 어떤 작업이 시간을 쓰는지 확인할 여지가 넓어졌다.

화면이 느리다고 모든 컴포넌트에 최적화 코드를 넣기보다는 사용자 입력부터 화면이 반영될때까지 어디서 기다리는지 먼저 살펴보면 좋겠다.

# 5. 실제 화면에서는 이렇게 비교해보자

상태를 유지하고싶은 탭 하나부터 적용하면 차이를 확인하기 쉽다. 검색 조건과 목록 위치처럼 사용자가 돌아왔을때 기대하는 값을 적어보자.

```text
검색어 입력 → 다른 탭으로 이동 → 다시 돌아오기
                         ↓
입력값 / 화면 상태 / Effect 연결 상태 확인
```

빠르게 여러번 전환했을때 중복 요청이나 중복 구독이 생기지 않는지도 확인해보면 좋겠다. 정상적으로 한번 전환하는것만으로는 정리 로직의 문제를 놓칠 수 있다.

모든 탭을 유지하면 처음 준비하는 비용이나 메모리가 늘어날 수도 있다. 자주 돌아오는 화면과 다시 만들어도 괜찮은 화면을 나눠서 적용 범위를 정하는게 좋겠다.

# 마무리

이번 React 19.2는 화면을 그리는것뿐 아니라 보이지 않는 UI와 Effect의 수명까지 더 명시적으로 다룰 수 있게 된 변화로 보인다.

개인적으로는 상태를 남기는것과 외부 연결을 유지하는것을 구분할 수 있다는 점이 흥미롭다. UI가 남아있어야하는 이유와 계속 실행돼야하는 이유는 다를 수 있기 때문이다.

우선 탭이나 작업 패널처럼 실제로 상태가 사라져 불편했던 화면에서 비교해보면 좋겠다. 새 API를 추가하는것보다 사용자가 돌아왔을때 어떤 상태를 기대하는지 먼저 정해봐야겠다..


[2025.10.03 주간 개발 트렌드] React 19.2 정리 (Activity, Effect, SSR)

독자의 메모