React에서 애니메이션 적용 - react-transition-group 사용법

npm install react-transition-group

 

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './App.css';

export default function App() {
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    setItems((prev) => [...prev, prev.length + 1]);
  };

  const removeItem = (id) => {
    setItems((prev) => prev.filter((item) => item !== id));
  };

  return (
    <div>
      <button onClick={addItem}>항목 추가</button>
      <TransitionGroup component="ul">
        {items.map((item) => (
          <CSSTransition key={item} timeout={300} classNames="fade">
            <li>
              {item}
              <button onClick={() => removeItem(item)}>삭제</button>
            </li>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

 

 

//App.css

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}