[Animation] Framer-motion, React Status에 따른 motion.div의 Animation이 실행되지 않던 이슈

      {status !== "RESULT" && (
        <MotionDiv
          initial={{ opacity: 1 }}
          exit={{
            opacity: 0,
          }}
          transition={{
            duration: 1,
            ease: "easeOut",
          }}
        >
          <Component1 />
        </MotionDiv>
      )}

      {status === "RESULT" && (
        <MotionDiv
          initial={{ bottom: "-20rem" }}
          animate={{
            bottom: 0,
          }}
          transition={{
            duration: 1,
            ease: "easeOut",
          }}
        >
          <Component2 />
        </MotionDiv>
      )}

위와 같이 React Status에 따라서 조건에 맞는 컴포넌트가 mount, unMount 될 때 각각의 애니메이션이 실행되도록 motion.div를 사용하여 initial 값과 exit, animation의 값을 설정해주었다. 

하지만 status가 변경되는 동시에 아무런 애니메이션이 실행되지 않았고, 원인을 찾아보았다. 

원인은 생각보다 간단했다,,,

Framer Motion이 DOM에서 제거되는 구성 요소를 처리하기 위해 AnimatePresence가 필요하기 때문에 MotionDiv 구성 요소의 exit 애니메이션이 트리거되지 않는다는 사실로 인해 발생했던 문제이다. AnimatePresence가 없으면 status !== "RESULT"가 false가 되면 Component1 구성 요소는 단순히 exit 애니메이션을 건너뛰고 DOM에서 제거된다.

따라서 
AnimatePresence로 MotionDiv를 래핑해주고. 이를 통해 Framer Motion이 구성요소가 DOM에서 제거되려고 하는 시점을 감지하고 제거하기 전에 exit 애니메이션을 실행하게 할 수 있었다.

또한 Framer Motion이 DOM에 들어오고 나가는 구성 요소를 적절하게 추적하게 하기 위해 key를 부여해준다.