시작하기 · 4단계

시작하기

패키지를 설치하고, 첫 컴포넌트를 그리고, 컴포넌트에 데이터를 주고, 움직임을 고릅니다. 어느 단계에도 Provider나 설정은 없습니다.

1
설치
Chorus는 React 19.2 이상이 필요합니다. React Native 앱에서는 React Native가 선택적 피어이며, 같은 패키지가 네이티브 빌드를 자동으로 고릅니다.
$
```
npm install @kkwaenggwari/animated-chorus
```
더 설정할 것이 없습니다. 추가할 Provider, 플러그인, 스타일시트가 없습니다.
2
첫 컴포넌트
상태에서 가져온 값으로 MotionNumber를 그립니다. 상태를 바꾸면 숫자가 구릅니다. +1을 누른 다음 ×10을 눌러 새 자리가 굴러 들어오는 것을 보세요.
App.jsx
```
import { useState } from 'react';
import { MotionNumber } from '@kkwaenggwari/animated-chorus';

export default function App() {
  const [count, setCount] = useState(9);
  return (
    <button onClick={() => setCount(count + 1)}>
      <MotionNumber value={count} />
    </button>
  );
}
```
예제를 준비하는 중…
설정에서 mode를 roll로 바꾸면 바뀐 자리가 사이의 숫자를 거쳐 갑니다.
3
데이터 넘기기
여러 항목을 보여 주는 컴포넌트는 배열을 받습니다. items는 내 데이터, getKey는 안정적인 키(기본값은 item.id, 문자열과 숫자는 그 값 자체), renderItem은 각 항목을 그립니다. 항목 요소를 그리고 측정하는 일은 컴포넌트가 합니다.
Tabs.jsx
```
import { MotionHighlight } from '@kkwaenggwari/animated-chorus';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
];

export function Tabs({ tab, setTab }) {
  // Keys come from item.id; labels from item.label, or renderItem.
  return <MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;
}
```
키는 고유해야 합니다. 배열이 바뀌면 들어오고, 나가고, 자리를 옮긴 항목만 움직입니다.

움직임 고르기

모든 컴포넌트는 transition을 받습니다. 시간 곡선이나 스프링입니다. motionTokens에 준비된 값이 있고, duration을 준 스프링은 정확히 그 시간에 끝나도록 보정됩니다.

Panel.jsx

import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';

<MotionHeight open={open} transition={motionTokens.spring.gentle}>…</MotionHeight>
<MotionHeight open={open} transition={{ duration: 300, easing: 'easeOut' }}>…</MotionHeight>
<MotionHeight open={open} transition={{ tempo: 'spring', spring: { stiffness: 300, damping: 30 }, duration: 500 }}>…</MotionHeight>

React Native도 같은 import와 같은 props를 씁니다.

설정은 이것이 전부입니다

나머지는 컴포넌트를 고르는 일입니다. 모든 컴포넌트에는 코드를 복사하기 전에 직접 조절해 볼 작업대가 있습니다.

설치

첫 컴포넌트

데이터 넘기기

움직임 고르기

설정은 이것이 전부입니다