react-transition-group은 리액트 라이브러리 입니다. 이 라이브러리를 통해 컴포넌트 등장, 퇴장할 때에 애니메이션을 쉽게 적용할 수 있습니다.
react-transition-group으로 컴포넌트 등장, 삭제 시 애니메이션 넣기
목차
1. react-transition-group란?
- react 어플리케이션에서 애니메이션를 쉽게 사용하기 위한 라이브러리.
- 컴포넌트가 마운트(등장), 업데이트, 언마운트(삭제)될 때 애니메이션 효과를 적용할 수 있게 해줌
2. 사용법
- react-transition-group 라이브러리 설치
npm i react-transition-group- 애니메이션 만들기
//index.css
.fade-enter {
// 컴포넌트 마운트 시 애니메이션 시작할때의 css 설정.
transform: translateX(-300px);
}
.fade-enter-active {
// 컴포넌트 마운트 시 애니메이션 끝났을 때의 css 설정.
transform: translateX(0);
transition: transform 300ms ease-in-out;
}
.fade-exit {
// 컴포넌트 언마운트 시 애니메이션 시작할 때의 css 설정.
transform: translateX(0);
}
.fade-exit-active {
// 컴포넌트 언마운트 시 애니메이션 끝났을 때의 css 설정.
transform: translateX(-300px);
transition: transform 300ms ease-in-out;
}- CSSTransition 컴포넌트로 애니메이션 실행할 컴포넌트 감싸주기
import { useState } from "react";
import { CSSTransition } from "react-transition-group";
// 라이브러리에서 불러오기.
function App() {
const [isShow, setIsShow] = useState(false);
// 컴포넌트 렌더링 조건을 담당하는 state 값.
const toggle = () => {
setIsShow((prevState) => !prevState);
};
return (
<div className="App">
<button onClick={toggle}>{isShow ? "Hide" : "Show"}</button>
// 버튼을 눌러서 컴포넌트 렌더링 여부 달라짐.
<CSSTransition
in={isShow}
// 애니메이션의 실행 기준이 되는 상태 값.
timeout={300}
// 애니메이션의 실행시간.
classNames="fade"
// 애니메이션의 class 명
unmountOnExit>
// 애니메이션 실행된 이후 unmount 할 것인지에 대한 설정. 해당 값이 true면 fade-exit 애니메이션이 실행된 이후 컴포넌트가 사라짐.
<div>애니메이션</div>
</CSSTransition>
</div>
);
}
export default App;