페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션 구현하기

SPA(Single Page Application)는 자바스크립트 실행 컨텍스트가 유지되므로, 페이지 전환 시에도 끊김 없는 애니메이션 처리가 가능하다. GatsbyJS는 History API를 활용해 페이지 히스토리를 처리하므로 이러한 구현이 가능하다.

페이지 전환 애니메이션을 구현할 때 주의할 점은 레이아웃 컴포넌트의 인스턴스가 페이지 전환 시 언마운트되지 않아야 한다는 것이다. 이를 위해 gatsby-plugin-layout을 사용하면 레이아웃을 페이지 전환 중에도 유지할 수 있다.

구체적인 구현 단계는 다음과 같다.

• Link 컴포넌트를 사용하여 브라우저의 기본 동작 대신 History API를 사용하도록 설정한다.
• react-transition-group 라이브러리의 TransitionGroup과 Transition 컴포넌트를 활용한다.
• location.pathname을 key 값으로 전달하여 페이지 변경을 감지한다.
• CSS를 통해 entering, exiting 등 상태에 따른 투명도와 위치를 조절한다.