React 모달 컴포넌트 unmount 애니메이션
2023-05-12
모달에서 닫기 버튼을 클릭하면 모달 컴포넌트가 unmount됩니다.
unmount 될 때 slide down 애니메이션을 적용하기 위해서는 어떻게 해야 할까요?
처음 생각한 방법
slide down 애니메이션을 0.3초 보여준다면, 닫기 버튼을 클릭후 애니메이션 시간인 0.3초 후에 모달이 unmount 되어야 합니다.
- 모달의 닫기 버튼 클릭
- 모달에 slide down 애니메이션 css 적용
- slide down 애니메이션의 duration만큼
setTimeout closeModal()실행
소스코드
const [isUnmounting, setIsUnmounting] = useState(false);
const handleClickClose = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
setIsUnmounting(true);
setTimeout(() => {
onClose && onClose();
}, 200);
};
return (
<BottomSheet
onClose={closeWindow}
className={classNames(!isUnmounting && 'animate-slideUp', isUnmounting && 'animate-slideDown')}
/>
);문제점
- 좋지 않은 가독성
- 로직을 procedural하게 작성해야 하기 때문에 functional한 리액트 구조에는 이상적이지 않은 것 같음
react-transition-group
react-transition-group이라는 오픈소스를 통해 리액트의 구조를 funtional하게 유지하면서 unmount 애니메이션을 적용할 수 있습니다.
const [showBottomSheet, setShowBottomSheet] = useState(false);
const closeWindow = () => {
setShowBottomSheet(false);
};
<Transition in={showBottomSheet} timeout={200} unmountOnExit>
{(state) => (
<BottomSheet
onClose={closeWindow}
formClassnames={classNames(
state === "entering" && "animate-slideUp",
state === "exiting" && "animate-slideDown",
)}
/>
)}
</Transition>;