AnimationPotal 컴포넌트 만들기

framer motion 라이브러리와 Portal 컴포넌트를 사용하여.
body 태그의 자식으로 애니매이션 dom을 렌더링 하는 AnimationPotal 컴포넌트를 생성해보자.

AnimationPotal 컴포넌트 구현에는
Portal 컴포넌트와 framer-motion의 AnimatePresence이 필요하다.

AnimatePresence
Portal 컴포넌트 관련 링크

AnimatePresence

framer-motion 라이브러리의 AnimatePresence 컴포넌트는
컴포넌트가 unmounted 될 때 exit animation을 가능하게 해준다.

exit animation을 통해 화면 전환이 더 부드러워지는 효과를 줄 수 있다.

자식 컴포넌트들은 유일한 key를 가져야만 AnimatePresence가 제대로 동작한다.

AnimatePortal 컴포넌트 구현

Portal 컴포넌트와 AnimatePresence 컴포넌트를 조합하여 구현한다.

import { AnimatePresence } from 'framer-motion';
import { type ComponentProps } from 'react';

import Portal from './Portal';

interface Props extends ComponentProps<typeof Portal> {
  isShowing: boolean; // children의 렌더링 여부
  mode?: ComponentProps<typeof AnimatePresence>['mode'];
}

const AnimatePortal = ({ children, isShowing, mode = 'wait' }: Props) => {
  return (
    <Portal>
      <AnimatePresence mode={mode}>{isShowing && children}</AnimatePresence>
    </Portal>
  );
};

export default AnimatePortal;