React에서 슬라이드 트랜지션 구현하기

React에서 슬라이드 트랜지션 구현하기

가장 간단한 방법은 react-transition-group 라이브러리나 framer-motion을 사용하는 것입니다. 

여기서는 framer-motion을 활용한 예제를 알려드릴게요.

---

ex) 리액트는 아니고 뷰프로젝트지만 대략적으로 이런 느낌이다 하고 참고하면 좋겠습니다.

아래 유알엘을 탭하고 프로젝트 뷰에서 네브를 탭하면 화면이 슬라이드로 전환되는데 이런 효과를 주는 기능이라고 생각하면 됩니다.

https://codesandbox.io/p/sandbox/twice-mobile-improvement-vzlj6n

---

1. 필요한 라이브러리 설치하기

npm install framer-motion react-router-dom

terminal

 

---

2. 페이지 컴포넌트 만들기

 

// HomePage.js
import React from 'react';
import { motion } from 'framer-motion';

const HomePage = () => {
  return (
    <motion.div
      initial={{ x: "100%" }}  // 오른쪽에서 시작
      animate={{ x: "0%" }}    // 가운데로 이동
      exit={{ x: "-100%" }}    // 왼쪽으로 이동
      transition={{ duration: 0.3 }}
    >
      <h1>홈페이지</h1>
      <p>여기는 홈 페이지입니다.</p>
    </motion.div>
  );
};

export default HomePage;

jsx

 

// AboutPage.js
import React from 'react';
import { motion } from 'framer-motion';

const AboutPage = () => {
  return (
    <motion.div
      initial={{ x: "100%" }}
      animate={{ x: "0%" }}
      exit={{ x: "-100%" }}
      transition={{ duration: 0.3 }}
    >
      <h1>소개 페이지</h1>
      <p>여기는 소개 페이지입니다.</p>
    </motion.div>
  );
};

export default AboutPage;

jsx

 

 

---

3. 라우터 설정하기

 

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function AnimatedRoutes() {
  const location = useLocation();
  
  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </AnimatePresence>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      
      <AnimatedRoutes />
    </BrowserRouter>
  );
}

export default App;

jsx

 

---

코드 설명

---

framer-motion의 motion.div를 사용하여 애니메이션을 적용합니다.

---

initial: 컴포넌트가 처음 나타날 때의 위치 (오른쪽에서 시작)

---

animate: 컴포넌트가 화면에 보일 때의 위치 (중앙으로 이동)

---

exit: 컴포넌트가 사라질 때의 위치 (왼쪽으로 이동) 

---

AnimatePresence: 컴포넌트가 사라질 때의 애니메이션을 처리합니다.

---

mode="wait": 이전 애니메이션이 완료될 때까지 새 애니메이션을 기다립니다.

---

이 예제를 실행하면 페이지 간 이동 시 오른쪽에서 왼쪽으로 슬라이드되는 효과를 볼 수 있습니다. 

iOS 앱과 같은 자연스러운 전환 효과를 웹에서도 구현할 수 있습니다 .

 

end