# React의 중요한 변화 2가지: View Transitions와 Activity

> Clean Markdown view of GeekNews topic #20550. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20550](https://news.hada.io/topic?id=20550)
- GeekNews Markdown: [https://news.hada.io/topic/20550.md](https://news.hada.io/topic/20550.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-04-27T09:47:01+09:00
- Updated: 2025-04-27T09:47:01+09:00
- Original source: [react.dev](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more)
- Points: 10
- Comments: 0

## Summary

React는 새로운 실험적 기능인 **View Transitions**와 **Activity**를 공개했습니다. View Transitions는 **부드러운 페이지 전환 애니메이션**을 쉽게 구현할 수 있도록 하며, Activity는 UI를 **숨기고 상태를 보존**하여 성능 최적화를 가능하게 합니다. 또한, **자동 의존성 처리**, **Fragment Refs**, **Concurrent Stores** 등 다양한 기능이 개발 중입니다. 이외에도 React 전용 **커스텀 트랙**, **IDE 확장 프로그램**, **제스처 기반 애니메이션** 등의 기능이 연구되고 있습니다.

## Topic Body

- React가 새로운 실험적 기능을 공개함  
  - `View Transitions`는 **부드러운 페이지 전환 애니메이션**을 쉽게 적용할 수 있게 해줌  
  - `Activity`는 UI를 **숨기고 상태를 보존**하면서 성능 최적화를 가능하게 함  
- 이외에도 **자동 의존성 처리**, **Fragment Refs**, **Concurrent Stores** 등 다양한 기능 개발이 진행 중  
  
### View Transitions 주요 특징  
  
- 새로 도입된 `startViewTransition` 브라우저 API를 활용해 애니메이션을 구현함  
- `<ViewTransition>`으로 어떤 요소를 애니메이션할지 명시하고, `startTransition`, `useDeferredValue`, `Suspense` 등을 트리거로 사용할 수 있음  
- 기본적으로 **크로스페이드** 애니메이션을 제공하며, CSS로 커스터마이징 가능함  
- **공유 요소 전환(shared element transitions)** 도 지원하며, 같은 `name` 속성을 가진 요소 간 자연스러운 이동 가능함  
- 트랜지션 원인(cause)에 따라 애니메이션을 다르게 지정할 수 있는 `addTransitionType` API 제공  
  
### Activity 주요 특징  
  
- `<Activity>`를 통해 UI를 숨기고 상태를 유지하거나, 필요 시 프리렌더링 가능  
- 숨김 모드에서는 컴포넌트가 언마운트되지만 상태는 보존되며, 렌더 우선순위가 낮아짐  
- 페이지 이동 시 입력값이나 상태를 잃지 않고 복원할 수 있음  
- 향후에는 모달용 모드나 메모리 절약을 위한 상태 제거 기능도 추가될 예정임  
- 서버 사이드 렌더링(SSR)에서도 Activity가 최적화 동작을 지원함  
  
### 그외 개발 중인 기능들  
- # React Performance Tracks  
  - 브라우저 퍼포먼스 프로파일러에 React 전용 **커스텀 트랙**을 추가하는 기능 개발 중  
  - 아직 퍼포먼스 및 Suspense 연결 문제를 해결 중임  
- # 자동 효과 의존성 처리 (Automatic Effect Dependencies)  
  - React 컴파일러를 통해 `useEffect` 의존성을 자동으로 삽입해 코드 간결성과 이해도를 높이려는 목표  
  - 컴포넌트 생명주기가 아닌 **Effect 중심 사고**를 유도하려 함  
- # Compiler IDE Extension  
  - React Compiler를 기반으로 하는 **IDE 확장 프로그램** 개발 중  
  - 코드 최적화, 규칙 위반 감지, 자동 삽입된 의존성 표시 등 다양한 기능 제공 예정  
- # Fragment Refs  
  - 여러 DOM 요소를 하나의 Ref로 관리할 수 있도록 하는 **Fragment Ref** 기능 연구 중  
  - DOM API 호출을 더 쉽게 만들기 위한 목적임  
- # Gesture Animations  
  - View Transition을 **터치 제스처 기반 애니메이션**에도 확장하려는 연구 진행 중  
  - 연속적인 움직임, 완료되지 않은 동작 처리, 새 DOM과 기존 DOM의 반전 처리 등의 문제 해결 중  
- # Concurrent Stores  
  - 외부 스토어를 React와 **병행(Concurrent)** 방식으로 자연스럽게 통합하려는 목표  
  - `useSyncExternalStore`의 한계를 넘어 새로운 `use(store)` 스타일 API를 개발 중임

## Comments



_No public comments on this page._