들어가며

애니메이션을 적용하려던 컴포넌트는 이미 unmount되고 없다 이 글에서는 React 모달 컴포넌트 unmount 애니메이션 주제를 중심으로 내용을 정리했습니다. 검색이나 북마크로 다시 찾아올 때 빠르게 맥락을 잡을 수 있도록 서두와 마무리를 덧붙였습니다.

아래 본문은 기존에 작성해 두었던 내용을 유지하며, 구조만 블로그 글 형태에 맞게 다듬었습니다.

모달에서 닫기 버튼을 클릭하면 모달 컴포넌트가 unmount됩니다.
unmount 될 때 slide down 애니메이션을 적용하기 위해서는 어떻게 해야 할까요?

처음 생각한 방법

slide down 애니메이션을 0.3초 보여준다면, 닫기 버튼을 클릭후 애니메이션 시간인 0.3초 후에 모달이 unmount 되어야 합니다.

1. 모달의 닫기 버튼 클릭
2. 모달에 slide down 애니메이션 css 적용
3. slide down 애니메이션의 duration만큼 setTimeout
4. 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>;

참고자료

react-transition-group - Transition

마무리

• 이 글의 예제와 설명은 작성 시점 기준이므로, 지금 사용 중인 런타임·프레임워크·라이브러리 버전과 맞는지 공식 문서로 한 번 더 확인하는 것이 좋습니다.
• 예제 코드는 이해를 돕기 위한 것이니, 실서비스에 적용할 때는 에러 처리·경계 조건·보안(CORS, 토큰, 입력 검증 등) 을 팀 규칙에 맞게 보강하세요.
• 같은 주제로 정리한 글이 있다면 서로 내부 링크를 걸어 두면 나중에 복습하기 편합니다.