[React] 부드러운 화면전환 페이지전환 하는법 | framer-motion 을 통한 AnimatePresence

React 리액트에서 화면이 바뀔때마다,

화면전환, 페이지전환 될때마다

서서히 나타나는 부드러운 효과를 주고싶다면??

framer-motion 을 통한 AnimatePresence 를 사용하는 방법을 알려드릴게요.

---

 

먼저 비주얼스튜디오의 터미널에

 

npm i framer-motion

 

를 입력하고 다운받아줍니다.

 

---

import {AnimatePresence} from 'framer-motion';

그다음 App.js 파일로 가셔서 윗부분에

framer-motion 라이브러리에서 AnimatePresence 를 import 해줍니다.

 

 

---

App.js 파일에 여러 페이지가

라우트로 걸려있겠죠?

그 Routes 밖으로

전체를 감싸줍니다.

 

// App.js 파일

function App() {
  return (
    <div className="App">
            <AnimatePresence>
        <Routes>
          <Route path='/' element={<MainPage />} />
          <Route path='/sub1' element={<sub1 />} />
          <Route path='/sub2' element={<sub2 />} />
          <Route path='/sub3' element={<sub3 />} />
    		
        </Routes>
        </AnimatePresence>
    </div>

 

---

그다음 컴포넌트에 Wrapper 라는 새로운 파일을 하나 만들고

아래 내용을 적어줍니다.

 

import React from 'react';
import {motion} from 'framer-motion';
// motion 임포트하기!

const Wrapper = ({children}) => {
    return (
    
      <motion.div
      initial={{
        opacity: 0
      }}
      animate={{
        opacity: 1
      }}
      transition={{
        duration: 1.5,
        ease: "easeInOut"
      }}
  
      >
        {children}
      </motion.div>
 
    );
};

export default Wrapper;

 

여기서 opacity는 0 이었다가 1로 서서히 진해지고

transition안에 duration으로 변화의 속도를 조정해줄 수 있어요.

이 Wrapper 를 똑같이 만든다음

---

아래처럼 페이지마다 전체를 Wrapper 컴포넌트로 감싸줍니다.

 

const MainPage = () => {
    return (
        <Wrapper>

            <Header/>
         
            <Main/>
           
            <Footer/>
        </Wrapper>
    );
};

export default MainPage;

그럼 끝!

오늘은 부드러운 화면전환 페이지전환 하는법 ,

framer-motion 을 통한 AnimatePresence를 알려드렸습니다!