React에서 Flitter 사용하기

위에서 보여진 것처럼 Flitter를 SVG 요소와 AppRunner를 직접 사용할 수 있지만, @meursyphus/flitter-react 패키지를 통해 React와 더 쉽게 통합할 수 있는 방법을 제공합니다.

Widget 컴포넌트

@meursyphus/flitter-react의 Widget 컴포넌트는 모든 복잡한 설정을 자동으로 처리합니다:

import Widget from "@meursyphus/flitter-react";

주요 장점

  1. refs를 수동으로 관리할 필요가 없음
  2. AppRunner 생명주기 자동 관리
  3. 더 깔끔하고 React스러운 문법
  4. 내장된 리사이즈 처리

속성들

Widget 컴포넌트는 다음과 같은 props를 받습니다:

  • renderer: “svg”(기본값) 또는 “canvas” 렌더링 선택
  • width: 유효한 CSS 너비 값 (예: “100%”, “calc(100vh - 20px)”, “auto”)
  • height: 유효한 CSS 높이 값
  • widget: 렌더링할 Flitter 위젯

프레임워크 지원

React 외에도 Flitter는 @meursyphus/flitter-svelte 패키지를 통해 Svelte에 대한 공식 지원을 제공하며, 비슷한 기능과 사용 편의성을 제공합니다.

기본 사용법

위의 해결된 예제에서 볼 수 있듯이, Widget 컴포넌트를 사용하면 다음과 같은 점에서 코드를 크게 단순화할 수 있습니다:

  • useEffect와 refs가 필요 없음
  • SVG/Canvas 생성 자동 처리
  • AppRunner 생명주기 관리
  • 더 선언적인 API 제공

다음 단계

이제 React에서 Flitter를 사용하는 방법을 이해했으니, 다음 섹션에서는 Flitter의 핵심 개념과 위젯 시스템을 살펴보겠습니다.