[React] 페이지 이동시 애니메이션 효과 적용하기 (feat. framer motion)

Framer-motion을 통해서 컴포넌트에 등장 애니메이션 적용한 저번 포스트에 이어서 이번 포스트에서는 페이지 이동시 자연스럽게 전환되도록 애니메이션 효과를 적용해보도록 하겠습니다. react-transition-group 같은 패키지를 사용해도 무방하지만 저번 포스트에서 framer-motion으로 진행했기 때문에 같은 라이브러리를 사용해서 진행해 보겠습니다. 우선 framer-motion이 설치되있지 않은 분들은 아래 명령어를 통해 설치해주시길 바랍니다. npm i framer-motion // 또는 yarn Animate Presence 로 애니메이션 적용하기 페이지간의 자연스러운 이동을 위해서는 Framer에서 제공하는 AnimatePresence라는 컴포넌트를 사용해야합니다. 해당 컴포넌트를..

2022.09.24