HydrationBoundary (우선순위 기반 하이드레이션)

#38RenderingHard

HydrationBoundary (우선순위 기반 하이드레이션)

HydrationBoundary

선택적 하이드레이션의 핵심 아이디어를 단순화한 <HydrationBoundary priority="high"|"low"> 컴포넌트를 구현하세요.

동작

hydrate prop이 false이면 children을 inert 상태로 렌더 (버튼 클릭 등 상호작용 무시).
hydratePriority prop이 boundary의 priority와 일치하면 (또는 "all"이면) children이 interactive 상태가 됩니다.
"high" 우선순위 경계가 "low"보다 먼저 hydrate 되어야 합니다. 즉, hydratePriority="all"로 한 번에 활성화할 때도 high → low 순으로 onHydrate 콜백이 호출됩니다.
각 boundary는 hydrate 시 onHydrate(priority)를 호출하여 호출 순서를 외부에서 검증 가능하게 합니다.

시그니처

function HydrationBoundary(props: {
  priority: 'high' | 'low';
  hydrate?: boolean;
  hydratePriority?: 'high' | 'low' | 'all';
  onHydrate?: (p: 'high' | 'low') => void;
  children: React.ReactNode;
}): JSX.Element;

학습 포인트

pointer-events: none + 클릭 가로채기로 inert 시뮬레이션
우선순위 기반 hydrate 순서 보장
React 18 selective hydration의 멘탈 모델

import React, { useEffect, useLayoutEffect, useRef } from 'react';

type Priority = 'high' | 'low';

export function HydrationBoundary({
  priority,
  hydrate = true,
  hydratePriority = 'all',
  onHydrate,
  children,
}: {
  priority: Priority;
  hydrate?: boolean;
  hydratePriority?: Priority | 'all';
  onHydrate?: (p: Priority) => void;
  children: React.ReactNode;
}) {
  // TODO: active = hydrate && (hydratePriority === 'all' || hydratePriority === priority)
  const active = false;

  // TODO: high 우선순위가 항상 먼저 hydrate되도록 보장하세요.
  //   - useLayoutEffect를 사용해 high는 즉시 onHydrate 호출
  //   - low는 queueMicrotask 또는 setTimeout으로 한 틱 뒤로 미뤄
  //     hydratePriority='all'일 때 high가 먼저 호출됨을 보장
  useLayoutEffect(() => {
    if (!active) return;
    if (priority === 'high') {
      // TODO: onHydrate?.('high')
    } else {
      // TODO: queueMicrotask(() => onHydrate?.('low'))
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [active, priority]);

  return (
    <div
      data-testid={`boundary-${priority}`}
      data-active={active ? 'true' : 'false'}
      // active=false면 클릭/포커스 등 인터랙션을 막습니다
      onClickCapture={active ? undefined : (e) => { e.stopPropagation(); e.preventDefault(); }}
      style={{ pointerEvents: active ? 'auto' : 'none' }}
    >
      {children}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import React, { useEffect, useLayoutEffect, useRef } from 'react';

type Priority = 'high' | 'low';

export function HydrationBoundary({
  priority,
  hydrate = true,
  hydratePriority = 'all',
  onHydrate,
  children,
}: {
  priority: Priority;
  hydrate?: boolean;
  hydratePriority?: Priority | 'all';
  onHydrate?: (p: Priority) => void;
  children: React.ReactNode;
}) {
  // TODO: active = hydrate && (hydratePriority === 'all' || hydratePriority === priority)
  const active = false;

  // TODO: high 우선순위가 항상 먼저 hydrate되도록 보장하세요.
  //   - useLayoutEffect를 사용해 high는 즉시 onHydrate 호출
  //   - low는 queueMicrotask 또는 setTimeout으로 한 틱 뒤로 미뤄
  //     hydratePriority='all'일 때 high가 먼저 호출됨을 보장
  useLayoutEffect(() => {
    if (!active) return;
    if (priority === 'high') {
      // TODO: onHydrate?.('high')
    } else {
      // TODO: queueMicrotask(() => onHydrate?.('low'))
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [active, priority]);

  return (
    <div
      data-testid={`boundary-${priority}`}
      data-active={active ? 'true' : 'false'}
      // active=false면 클릭/포커스 등 인터랙션을 막습니다
      onClickCapture={active ? undefined : (e) => { e.stopPropagation(); e.preventDefault(); }}
      style={{ pointerEvents: active ? 'auto' : 'none' }}
    >
      {children}
    </div>
  );
}

Open Sandbox