MotionList

바뀐 항목만 움직이는 데이터 목록.

웹React Native목록

직접 해 보기

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

App.jsx

import { useState } from 'react';
import { MotionList } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const ideas = [
  'Plan the launch',
  'Write release notes',
  'Record a demo',
  'Update the docs',
  'Reply to issues',
  'Tag the release',
];

export default function App({ effect = 'rise', stagger = 40, distance = 18 }) {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Review the design' },
    { id: 2, title: 'Fix the flaky test' },
    { id: 3, title: 'Ship the changelog' },
  ]);
  const [next, setNext] = useState(4);

  const add = () => {
    setTasks([{ id: next, title: ideas[next % ideas.length] }, ...tasks]);
    setNext(next + 1);
  };
  const remove = (id) => setTasks(tasks.filter((task) => task.id !== id));
  const shuffle = () => setTasks([...tasks.slice(1), tasks[0]].filter(Boolean));
  const sort = () => setTasks([...tasks].sort((a, b) => a.title.localeCompare(b.title)));

  return (
    <div className="stage">
      <div className="buttons">
        <button className="primary" onClick={add}>
          Add task
        </button>
        <button onClick={shuffle}>Move first to end</button>
        <button onClick={sort}>Sort A–Z</button>
      </div>
      <MotionList
        as="ul"
        className="tasks"
        items={tasks}
        effect={effect}
        stagger={stagger}
        distance={distance}
        renderItem={(task) => (
          <div className="task">
            <span>{task.title}</span>
            <button onClick={() => remove(task.id)}>Done</button>
          </div>
        )}
      />
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  max-width: 520px;
  min-height: 360px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons .primary {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

.tasks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.task button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font:
    650 13px system-ui,
    sans-serif;
  cursor: pointer;
}

가장 짧은 사용법

Todos.jsx

<MotionList as="ul" items={todos} renderItem={(todo) => <TodoRow todo={todo} />} />;

대신 처리하는 일

새 항목은 제한된 시간차로 들어오고 바뀌지 않은 항목은 가만히 있습니다.
지운 항목은 흐름에서 빠진 뒤 제자리에서 사라지고 나머지가 빈자리를 메웁니다.
순서가 바뀐 항목은 새 위치로 미끄러집니다.
이동 중에 또 바뀌어도 속도를 이어받습니다.
present={false}는 모든 항목을 내보내고, playKey는 입장을 다시 재생합니다.

이럴 때 쓰세요

할 일 목록.
필터된 검색 결과.
장바구니.

Props

Prop	타입	기본값	설명
`items`	`readonly T[]`	`—`필수	내 데이터 배열.
`getKey`	`(item) => string \| number`	`item.id`	항목의 고유하고 안정적인 키를 돌려줍니다. 기본값은 `item.id`, 문자열과 숫자는 그 값 자체입니다.
`renderItem`	`(item, index) => ReactNode`	`item.label`	항목을 그립니다.
`as`	`element`	`'div'`	그릴 요소.
`itemAs`	`element`	`'li' \| 'div'`	각 항목의 요소.
`itemClassName`	`string`		각 항목 요소의 클래스. 인라인 스타일은 `itemStyle`.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	항목이 들어오고 나가는 방식.
`distance`	`number`	`16`	`rise`와 `slide`의 이동 거리(픽셀).
`stagger`	`number`	`40`	들어오는 항목 사이의 밀리초.
`order`	`'forward' \| 'reverse'`	`'forward'`	시간차의 방향.
`present`	`boolean`	`true`	`false`면 레이아웃을 유지한 채 모든 항목을 내보내고, `true`면 되돌립니다.
`initial`	`boolean`	`true`	목록이 마운트될 때 입장을 재생합니다.
`playKey`	`string \| number`		바꾸면 입장을 다시 재생합니다.
`transition`	`Transition`	`spring`	들어오고 나가는 항목의 전환.
`layoutTransition`	`Transition`	`spring`	새 위치로 미끄러지는 항목의 전환.

그 밖의 props는 그려지는 요소로 전달되므로 className, style, 이벤트 핸들러를 평소처럼 쓸 수 있습니다.

웹과 React Native

각 항목에는 감싸는 요소가 붙고(ul·ol 안에서는 li, 그 밖에는 div, itemAs로 바꿈) itemClassName으로 꾸밉니다.

키는 고유해야 합니다. 전체 높이도 움직이려면 목록을 MotionHeight로 감싸세요.