[framer-motion] AnimatePresence exit 애니메이션이 안될 때

처음 framer motion을 접한후 가장 큰 문제가 exit할때의 애니메이션이 적용되지 않을 때였다.

직접 경험 해본 바 3가지만 경우만 잘 체크하면 문제 없이 잘 적용되어 글을 작성해보려고 한다.

AnimatePresence: 구성요소가 React 트리에서 제거될 때 애니메이션으로 표시되도록 허용해준다.

즉 AnimatePresence 를 적어주어야 exit 애니메이션이 적용이 된다.

 

1. AnimatePresence을 적자

무작정 처음 framer motion을 시작했을때 아무것도 모르고 exit 애니메이션을 적용시킬때의 실수. AnimatePresence로 exit 애니메이션을 가지고 있는 태그를 감싸주어야 exit 애니메이션이 동작한다.

2. AnimatePresence의 위치

가장 내가 해결하는데 오래 걸렸던 경우다. 

// 이렇게 적으면 안된다.
<>
      {onClick && (
        <>
          <AnimatePresence>
            
            <motion.div
              key={"modal"}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              안녕
            </motion.div>
          </AnimatePresence>
        </>
      )}
    </>

 

나는 처음에는 멋도 모르고 단순히 이렇게 onClick state 밖에 AnimatePresence를 적용 시켰다. 하지만 이렇게 하면 exit 함수는 적용되지 않는다. 

잘생각해보면 당연하다. 왜냐하면 AnimatePresence가 존재해야 exit애니메이션이 동작하는데 onClick이 false가 되버리면서 AnimatePresence도 같이 없어지기 때문에 AnimatePresences는 onClick 삼항연산자를 감싸는 구조로 적어야한다.

 // 요렇게 적어주어야 한다.
 <>
      <AnimatePresence>
        {onClick && (
          <>
            <motion.div
              key={"bg"}
              initial={{ opacity: 0 }}
              animate={{ opacity: 0.5 }}
              exit={{ opacity: 0 }}
            >안녕</motion.div>
          </>
        )}
      </AnimatePresence>
    </>

3. 애니메이션을 적용하려는 태그에 key값을 적어야한다.

공식문서를 보면 알 수 있는데 애니메이션을 적용하려는 태그에 key값을 써주어야 한다. 이때 주의해야할 것은 unique한 값을 적어주어야 한다는 것이다. 그래야 AnimatePresence 트리에서 해당 항목을 존재를 잘 추적할 수 있다.