웹과 React Native

같은 import

패키지 하나를 설치하고 두 플랫폼 모두 패키지 루트에서 가져옵니다. 필수 피어는 React뿐이고, React Native는 네이티브 앱을 위한 선택적 피어입니다. 어느 플랫폼에도 Provider, 감싸는 컴포넌트, 설정 호출이 없습니다.

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

모션이 재생되는 방식

웹에서는 스프링을 해석적으로 샘플링해 Web Animations API로 재생하므로 불러올 애니메이션 라이브러리도, 프레임마다의 React 렌더도 없습니다. React Native에서는 이동·크기 변형과 투명도에 네이티브 드라이버를 쓰는 Animated를, 레이아웃(너비·높이)이 바뀔 때만 JS 드라이버를 씁니다.

React Native에서 다른 점

API는 같습니다. 기기에서 알아챌 차이는 다음과 같습니다.

• 숫자와 스트리밍 글은 진짜 Text로 남아 선택, 줄바꿈, numberOfLines, 접근성이 평소처럼 동작합니다.
• MotionSheet와 MotionZoom은 투명한 Modal로 그려지고 뒤로 가기 버튼으로 닫힙니다.
• 시트 안의 ScrollView는 자기 제스처를 유지하므로 시트는 손잡이와 고정 영역에서 끕니다.
• MotionHold는 접근성 실행 동작으로 바로 확정됩니다.
• inline MotionSwap은 새 내용을 한 줄로 측정합니다. 줄바꿈되는 내용에는 inline=—를 쓰세요.

import { Text, View } from 'react-native';
import { MotionNumber, MotionSheet } from '@kkwaenggwari/animated-chorus';

export function Wallet({ balance, open, setOpen }) {
  return (
    <View>
      <MotionNumber
        value={balance}
        intl
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      />
      <MotionSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]}>
        <Text>Recent activity</Text>
      </MotionSheet>
    </View>
  );
}

레이아웃은 그대로 내 것

컴포넌트는 플랫폼 고유의 레이아웃을 지킵니다. 글자 크기와 줄바꿈, 글꼴 확대, 부모의 제약, 내 스타일이 그대로입니다. 모션 때문에 글자 폭을 고정하거나 글 높이를 정하거나 글자를 잘라 가리지 않습니다.

어디서 무엇을 검증했나

웹 동작은 실제 브라우저에서 검증합니다. React Native 동작은 공유 모델 테스트와 모의 렌더러로 확인하므로, 출시 전에는 대상 기기에서 제스처와 레이아웃을 확인하세요.