Next.js에서 자연스러운 Page Transition 방법 react-spring 과 "next-page-transitions"을 이용한 두가지 방법을 아래와 같이 예제로 구현했다다. 아래는, react-spring을 사용한 예제이다. 조금 시간을 두고 기다리면 결과를 볼 수 있다. 여기에서, "About", "Hello Day" 등을 클릭하면, 화면(page)이 겹치며(overlapped) 바뀌는 것을 알 수 있다. 아래는, Next.js의 Page Transition 은 " react-transition-group " 사용한 예제이다. 차이가 구분이 되는가? 둘다, 비슷해보이지만, next-page-transitions은 실제로 화면이 겹쳐지지 않고, 앞 페이지가 사라짐과 동시에 뒷 페이지를 나타내게 되어서 실제 DOM이 교체되어 버리기 때문에, 겹치며 사라지는 기능이 아니다. 반면, react-spring을 사용한 예제는, 앞 페이지가 뒷 페이지가 나타나서도 일시적으로 존재하는 구조로 되어, 겹치며 사라지는 화면을 구현할 수 있다. 실제 겹치며 사라지는 형태가 아니라, 페이지의 fade-in/out 정도와 같은 animation으로 충분하다면, 무엇을 사용하든 큰 문제가 되지 않는다. * 출처 - react-spring: https://codesandbox.io/s/react-spring-nextjs-routes-q80c6 - next-page-transitions: https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions
댓글
댓글 쓰기