usePerformanceMonitor

@hua-labs/hua/framework

Pro

출시 예정

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

FPS 및 성능 모니터링, 적응형 애니메이션 제어 (Pro)

설치

bash

npm install @hua-labs/hua

Import

tsx

import { usePerformanceMonitor } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

import { usePerformanceMonitor } from "@hua-labs/hua/framework";

const { fps, isLowPerformance, shouldReduceMotion } = usePerformanceMonitor({
  fpsThreshold: 45,
  sampleSize: 60,
});

// Adapt animations based on performance
const animationDuration = shouldReduceMotion ? 0 : 300;
const enableParticles = !isLowPerformance;

return (
  <div style={{ transition: `all ${animationDuration}ms` }}>
    {enableParticles && <ParticleEffect />}
    <Content />
  </div>
);

라이브 데모

FPS

60

프레임 시간

16.67ms

목표: 16.67ms (60fps)

드롭된 프레임

0

세션 누적

성능 상태

좋음

모든 애니메이션 효과 사용 가능

현재 권장 사항

✓파티클 효과
✓복잡한 전환
✓기본 애니메이션

감지된 기능

• GPU 가속: ✓
• requestAnimationFrame: ✓
• 모션 줄이기 설정: ✗
• 하드웨어 동시성: 8

API 레퍼런스

옵션

이름	타입	기본값	설명
fpsThreshold	number	45	저성능으로 판단하는 FPS 임계값
sampleSize	number	60	FPS 평균을 계산할 샘플 수
enabled	boolean	true	훅 활성화 여부
respectReducedMotion	boolean	true	prefers-reduced-motion 설정 반영 여부

반환값

이름	타입	설명
fps	number	현재 초당 프레임 수
frameTime	number	프레임당 소요 시간 (밀리초)
isLowPerformance	boolean	저성능 환경 여부
shouldReduceMotion	boolean	모션을 줄여야 하는지 여부
droppedFrames	number	드롭된 프레임 수
reset	() => void	통계 초기화
averageFps	number	세션 평균 FPS
isMonitoring	boolean	모니터링 중 여부
start	() => void	모니터링 시작
stop	() => void	모니터링 중지

사용 사례

적응형 애니메이션

성능에 따라 애니메이션 품질 조정

FPS 모니터

실시간 프레임율 모니터링 및 표시

배터리 인식

저전력 모드에서 애니메이션 감소

접근성 준수

reduced-motion 설정 기반 자동 조정

useKeyboardTogglePro useBreakpoint