Integrate

React 레퍼런스

<ComicStrip> 컴포넌트의 props와, prop이 바뀌어도 엘리먼트가 리마운트되지 않는 이유를 설명합니다.

`<ComicStrip>`

import { ComicStrip } from "@toonstrip/react";

<ComicStrip document={doc} packs={["/packs/comic-chat/"]} />

Prop	타입	의미
`document`	`ComicStripDocument`	스트립 데이터입니다. 알맞은 형태의 객체라면 무엇이든 되며, 보통은 임포트한 JSON 파일을 씁니다. 값이 바뀔 때마다 엘리먼트로 전달됩니다.
`packs`	`string[]`	에셋 팩의 베이스 URL입니다(`packages/element` 자체의 `.packs`와 같은 형태이며, `@toonstrip/astro` 컴포넌트가 받는 팩 이름과는 다릅니다. 이름을 URL로 리졸브하는 인테그레이션 단계가 여기에는 없기 때문입니다). 기본값은 `[]`입니다.
`placeholder`	`{ src, width, height }`	라이브 캔버스가 그려지기 전까지 라이트 DOM `<img>`로 보여줄 SSR 렌더링 PNG입니다. Next.js 레퍼런스를 참고하시기 바랍니다. `@toonstrip/cli`의 `renderPlaceholder`가 이 형태를 만들어 줍니다. 선택 사항이며, 대부분의 앱은 직접 설정하지 않습니다.
`className` / `style`	해당 없음	내부의 `<comic-strip>` 엘리먼트로 그대로 전달됩니다.

이 컴포넌트에는 자체 렌더링 로직이 없습니다. ref를 통해 <comic-strip>을 마운트하고, useEffect 안에서 document/packs를 DOM 속성으로 설정하는데, 이는 @toonstrip/astro의 클라이언트 렌더러와 동일한 방식입니다.

리마운트 없이 업데이트되는 이유

<ComicStrip>은 항상 같은 위치에 같은 호스트 태그를 렌더링하므로, React의 재조정 과정에서 리렌더링 사이에 기존 <comic-strip> DOM 노드가 그대로 재사용됩니다. 새로운 document 값은 노드를 해체하고 다시 만드는 대신 있는 그대로 갱신됩니다. M10 작업 중 devtools 콘솔에서 라이브 엘리먼트에 임시 속성을 태깅한 뒤 document 변경 이후에도 그 속성이 남아 있는지 확인하는 방식으로 검증했습니다.

예제

레포의 examples/react-vite는 Vite + React 앱으로, 토글 버튼으로 두 개의 수작업 문서를 전환합니다. scripts/copy-pack-assets.mjs는 dev/build 실행 전에 @toonstrip/pack-comic-chat의 파일들을 public/packs/comic-chat/로 복사합니다(Vite에는 Astro 같은 인테그레이션 훅 시스템이 없으므로, 설정 시점 훅이 아니라 일반 Node 스크립트로 구현되어 있습니다). 로컬에서 실행하려면 다음과 같이 합니다.

pnpm --filter react-vite-example dev

현재 제약 사항

React 18을 기준으로 테스트되었습니다. peerDependencies 범위는 React 19도 허용하지만, 19는 아직 테스트 매트릭스에 포함되어 있지 않습니다.

Tip

@toonstrip/element를 임포트해도 이제 서버에서 오류가 발생하지 않습니다(HTMLElement/ customElements 접근을 가드 처리했습니다). 따라서 이 패키지는 서버 사이드 렌더링에도 안전합니다. <ComicStrip>은 자체적으로 'use client' 지시어를 포함하고 있어, 별도의 래퍼 없이 Next.js App Router의 Server Component에서 바로 사용할 수 있습니다. 함께 쓰는 SSR 플레이스홀더 헬퍼(@toonstrip/cli의 renderPlaceholder)는 Next.js 레퍼런스를 참고하시기 바랍니다.

Tip

Vue 버전도 배포되어 있습니다. Vue 레퍼런스를 참고하시기 바랍니다. Svelte는 아직입니다. 그 전까지는 Plain HTML의 “프레임워크에서 사용하기” 절에서 다루는, 커스텀 엘리먼트를 각 프레임워크의 프로퍼티 바인딩 문법으로 직접 사용하는 방법을 참고하시기 바랍니다.