[React] 페이지 전환 애니메이션을 위한 framer-motion

🧩 framer-motion을 설치한다.

npm install framer-motion

🧩 애니메이션을 적용할 라우터를 감싸준다.

import { AnimatePresence } from "framer-motion";
...
    return (
       <BrowserRouter>
      /* AnimatePresence로 감싸주기 */
      		<AnimatePresence>
      			<Routes>
      				<Route path="/" element={<Home />} />
					<Route path="/login" element={<Login />} />
                    <Route path="/list" element={<List />} />
                </Routes>
			</AnimatePresence>
		</BrowswerRouter>
	)

🧩 각 라우터 파일에 적용할 애니메이션을 작성한다.

import { motion } from "framer-motion";
/* 1. framer-motion을 import한다 */

const Home = () => {
    return (
        <motion.div
   /* 2. 원하는 애니메이션으로 jsx를 감싸준다 */
        initial={{opacity: 0}}
        animate={{opacity: 1}}
        exit={{opacity: 0}}
        >
          <h1>Home</h1>
        </motion.div>
    )
}
export default Home;

여기에서 motion.div의 element를 확인하고 다양한 애니메이션을 적용할 수 있다. 나는 부드러운 페이지 전환만 원했기 때문에 투명도(opacity)를 조절해주었다.

해당 효과를 적용하기를 원하는 모든 라우터에 적용하면 끝!