가이드 · 09

SSR, 테스트, 운영

서버 렌더링, 하이드레이션, 테스트, 그리고 믿을 수 있는 정리 규칙.

서버 렌더링

훅 값은 초기값을 서버 마크업에 렌더하고, 하이드레이션 뒤에도 애니메이션이 이어집니다. React 18 이상은 안정적인 변수 이름에 useId를 쓰고, React 16·17 서버에서는 id를 넘기세요.

app/layout.jsx

import { AnimatedProvider } from '@kkwaenggwari/animated';

// The package entry is marked 'use client'. A server layout can render the
// provider directly; hooks and Animated.<tag> go inside Client Components.
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnimatedProvider>{children}</AnimatedProvider>
      </body>
    </html>
  );
}

이전 React의 안정적인 id

React 16이나 17로 서버 렌더링할 때만 필요합니다.

ssr.jsx

// React 18+ uses useId automatically. On React 16/17 servers, pass a stable id.
const progress = useAnimatedValue(0, { id: 'hero-progress' });

믿을 수 있는 정리

컴포넌트가 소유한 것은 모두 컴포넌트와 함께 해제됩니다.

useAnimated, useAnimatedValue, useTimeline, useReorder는 언마운트 때 컨트롤러와 리스너를 멈춥니다.
useAnimated 팩터리에서 선언한 컨트롤러와 입력은 의존성이 바뀌면 함께 교체됩니다.
Animated.Keep은 모션이 끝난 뒤 떠나는 자식을 제거하고, 새 pose는 지금 위치에서 끊고 이어갑니다.
React 밖의 bind, bindOutput, createTimeline, createLayoutScene은 명시적인 dispose를 돌려줍니다.

테스트

flushAnimatedUpdates()는 대기 중인 출력을 동기적으로 적용하므로 결정적인 테스트가 DOM을 검사할 수 있습니다.

Meter.test.jsx

import { flushAnimatedUpdates } from '@kkwaenggwari/animated';

act(() => progress.setValue(0.5));
flushAnimatedUpdates();
// Pending style writes are applied now; assert on the DOM.

텍스트, 속성, 프로퍼티

useAnimated 안의 output(target, mapping)은 style, 속성, 텍스트, 객체 프로퍼티 출력을 소유합니다. bindOutput은 같은 매핑을 즉시 붙이고 flush와 dispose를 돌려줍니다.

Counter.jsx

const label = useRef(null);

const count = useAnimated(
  0,
  (value) => {
    output(label, { text: new AnimatedComputed([value], (v) => `${Math.round(v * 100)}%`) });
    timing(value, { toValue: 1, duration: 1200 });
  },
  [],
);

<span ref={label} />;