▲

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

 (react.dev)
7P by xguru 1일전 | ★ favorite | 댓글과 토론
  • 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를 개발 중임