Islands Architecture (Island)

#18RenderingMedium

Islands Architecture (Island)

Islands Architecture

정적 HTML 안에 선택적 인터랙티브 섬(island) 을 심는 패턴을 구현하세요.

<Island enabled>...</Island>는 enabled === true일 때만 자식의 이벤트 핸들러를 활성화합니다. 비활성 상태에서는 정적 wrapper <div data-island="off">...</div> 로 감싸 hydration 없이 렌더만 합니다.

Props

interface IslandProps {
  enabled: boolean;
  children: React.ReactNode;
}

동작

enabled === true → <div data-island="on">{children}</div> 로 감싸고 자식 props 그대로 통과 (핸들러 동작).
enabled === false → <div data-island="off">{children}</div> 로 감싸되 자식이 단일 React element인 경우 onClick을 undefined로 덮어써 클릭을 무효화.

학습 포인트

정적 영역과 인터랙티브 영역을 분리하는 partial hydration의 핵심 아이디어
React.cloneElement 로 자식 props를 제어
비활성 섬은 마크업은 같아도 이벤트가 붙지 않음을 테스트로 검증

import { cloneElement, isValidElement, ReactNode } from 'react';

export interface IslandProps {
  enabled: boolean;
  children: ReactNode;
}

export function Island({ enabled, children }: IslandProps) {
  // TODO: enabled === true 면 <div data-island="on">{children}</div>
  // TODO: 그 외에는 <div data-island="off">...</div>로 감싸고
  //       자식이 단일 element면 onClick을 undefined로 덮어쓰기
  return <div data-island="off">{children}</div>;
}

Open Sandbox

Sandpack 로드 중…

import { cloneElement, isValidElement, ReactNode } from 'react';

export interface IslandProps {
  enabled: boolean;
  children: ReactNode;
}

export function Island({ enabled, children }: IslandProps) {
  // TODO: enabled === true 면 <div data-island="on">{children}</div>
  // TODO: 그 외에는 <div data-island="off">...</div>로 감싸고
  //       자식이 단일 element면 onClick을 undefined로 덮어쓰기
  return <div data-island="off">{children}</div>;
}

Open Sandbox