React 19.3 실전 — View Transitions, Fragment Refs, browser()를 이렇게 씁니다

React 19.3이 9월 9일에 나왔습니다. 거창한 메이저 릴리스는 아니고, 실험 기능이던 두 개가 정식으로 졸업한 마이너 릴리스예요. 그런데 이 세 가지는 실무에서 바로 손에 닿습니다. 목록 화면이 바뀔 때 애니메이션, 래퍼 div 없이 여러 요소에 ref 거는 일, 그리고 서버 렌더링에서 빼야 하는 브라우저 전용 컴포넌트. 각각 따로 라이브러리를 붙이거나 꼼수를 쓰던 것들인데, 이제는 React 안에 공식 방법이 있습니다. 업그레이드는 `npm install react@19.3 react-dom@19.3` 한 줄이면 되고, 지금 설치하면 10월 14일 패치를 포함한 19.3.1이 깔립니다.

**1. View Transitions — 목록이 바뀔 때, 애니메이션 라이브러리 없이**

문제는 이거예요. 탭을 바꾸거나 목록에서 항목을 지우면 화면이 뚝뚝 바뀝니다. framer-motion 같은 라이브러리를 붙이자니 작은 화면 하나에 과하고, CSS transition만으로는 마운트·언마운트까지 못 잡습니다.

19.3에서는 `<ViewTransition>`으로 감싸기만 하면 됩니다. 브라우저의 View Transition API를 React 렌더링과 연결해줘요.

```jsx

import { ViewTransition, useState, startTransition } from 'react';

export default function Component() {

  const [showItem, setShowItem] = useState(false);

  return (

    <>

      <button => {

        startTransition(() => setShowItem(prev => !prev));

      }}>

        {showItem ? '➖' : '➕'}

      </button>

      {showItem && (

        <ViewTransition>

          <Video video={videos[0]} />

        </ViewTransition>

      )}

    </>

  );

}

```

핵심은 두 가지입니다. 첫째, **애니메이션은 Transition으로 표시한 업데이트에서만** 일어납니다. `startTransition` 안의 setState, Suspense reveal, `useDeferredValue`가 여기에 해당하고, 긴급 업데이트는 애니메이션 없이 바로 반영됩니다. 그래서 위 예제처럼 버튼 핸들러를 `startTransition`으로 감싸는 게 필수예요. 둘째, 기본값은 부드러운 cross-fade이고, 네 가지 경우(enter / exit / update / share)에 따라 다르게 줄 수 있습니다. 캐러셀처럼 같은 상태 변경인데 방향마다 다르게 움직여야 할 때는 `addTransitionType`을 씁니다.

```jsx

function nextSlide() {

  startTransition(() => {

    addTransitionType('next');

    setCurrentSlide(c => c + 1);

  });

}

// 방향마다 다른 CSS 클래스를 지정

<ViewTransition

  enter={{ 'next': 'from-right', 'previous': 'from-left' }}

  exit={{ 'next': 'to-left', 'previous': 'to-right' }}

>

  <Page />

</ViewTransition>

```

Suspense와 같이 쓸 때는 한 가지만 조심하세요. `<Suspense>`를 그대로 감싸면 이미 로딩된 UI까지 매번 애니메이션이 돕니다. 공식 블로그가 권하는 패턴은 이렇습니다.

```jsx

<ViewTransition update="auto" default="none">

  <Suspense fallback={<Fallback />}>

    <Component />

  </Suspense>

</ViewTransition>

```

이렇게 하면 fallback이 뜰 때는 바로 뜨고, fallback에서 진짜 콘텐츠로 넘어갈 때만 애니메이션이 돕니다. 지금은 DOM에서만 동작하고, React Native 지원은 아직 준비 중입니다. 브라우저가 View Transition API를 지원하지 않으면 애니메이션 없이 바로 바뀌니까, 기능이 없다고 화면이 깨지지는 않습니다.

**2. Fragment Refs — 래퍼 div 없이, 여러 요소에 한 번에 ref**

두 번째로 자주 부딪히는 문제입니다. 형제 요소 여러 개에 포커스를 주거나, 화면에 보이는지 관찰하거나, 이벤트를 달고 싶은데 부모가 될 div가 없습니다. 스타일 때문에 래퍼 div를 추가할 수도 없고, 라이브러리 컴포넌트라 ref를 안 받는 경우도 있습니다.

19.3에서는 `<Fragment>`에 직접 ref를 달 수 있습니다. `<></>` 축약형은 안 되고, `Fragment`를 import해서 써야 합니다.

```jsx

import { Fragment, useRef, useEffect } from 'react';

function Component() {

  const fragmentRef = useRef(null);

  useEffect(() => {

    fragmentRef.current.focus();

  }, []);

  return (

    <Fragment ref={fragmentRef}>

      {posts.map(post => (

        <Heading key={post.id}>{post.title}</Heading>

      ))}

    </Fragment>

  );

}

```

ref로 받는 건 DOM 노드가 아니라 `FragmentInstance`라는 핸들입니다. DOM 구조를 바꾸지 않고, 자식들을 한 그룹으로 다루는 메서드만 모아뒀어요. `addEventListener` / `removeEventListener` / `dispatchEvent`, `focus` / `focusLast` / `blur`, `observeUsing` / `unobserveUsing`(IntersectionObserver·ResizeObserver 연결), 그리고 `getClientRects` / `scrollIntoView` 같은 측정·스크롤 메서드입니다. 예를 들어 화면 진입을 감지하는 래퍼는 이렇게 쓸 수 있습니다.

```jsx

// InView 안에서 Fragment ref에 observeUsing으로 IntersectionObserver를 연결하고,

// 자식이 뷰포트에 들어오면 onChange를 호출합니다

<InView>