Framer motion : Reorder을 통해 리스트 항목을 정렬해보자

Reorder은 리스트 항목을 드래그 앤 드롭으로 쉽게 재정렬할 수 있도록 도와주는 컴포넌트이다. 애니메이션 효과를 통해 부드럽고 자연스럽게 순서를 변경할 수 있도록 도와준다. 

• <Reorder.Group values={리스트 그룹} onReorder={순서 변경될 때 호출되는 함수}>
       <Reorder.Item value={리스트 항목}/>
  </Reorder.Group>

Reorder 속성

• axis = "x | y"
  드래그 가능한 방향(x: 수평, y: 수직)을 설정한다. 

 

Reorder 사용하기

1. Reorder 컴포넌트로 목록을 감싸고, 각 리스트를 Reorder.Item으로 설정한다.

각 리스트 항목에는 고유한 value가 필요하다. 

import { useState } from "react"
import { Reorder } from "framer-motion";

function Comp01() {
    const [items, setItems] = useState(["item1", "item2", "item3", "item4", "item5"]);

    return (
        // values에 그룹으로 묶을 리스트 지정
        <Reorder.Group values={items}>
            {items.map(item => 
            // value에 해당하는 항목 지정
                <Reorder.Item value={item} key={item}> 
                    {item} 
                </Reorder.Item>
            )}
        </Reorder.Group>
    )
}

export default Comp01;

 

2. 항목의 순서가 변경될 때 호출되는 콜백함수를(onReorder)  설정한다.

import { useState } from "react"
import { Reorder } from "framer-motion";
import styles from './Comp01.module.css'

function Comp01() {
    const [items, setItems] = useState(["item1", "item2", "item3", "item4", "item5"]);

    return (
        // onReorder에 항목의 순서가 변경될 때 시행할 함수 설정
        <Reorder.Group axis="y" values={items} onReorder={setItems} className={styles.comcontainer}>
            {items.map(item => 
                <Reorder.Item value={item} key={item}
                whileHover={{backgroundColor: 'rgb(237, 237, 237)'}}> 
                    {item} 
                </Reorder.Item>
            )}
        </Reorder.Group>
    )
}

export default Comp01;

 

Reorder 컴포넌트로 아래와 같이 요소가 생성이 된다.