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

이 글은 GatsbyJS와 react-transition-group을 사용하여 SPA에서 페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션을 구현하는 방법을 다룹니다. SPA의 장점 중 하나는 History API를 활용하여 자바스크립트 실행 컨텍스트를 유지하면서 화면 전환 시 애니메이션 처리가 가능하다는 점입니다.

GatsbyJS는 리액트 기반의 정적 웹사이트 생성기로, History API를 통해 페이지 히스토리를 처리하여 이러한 애니메이션 구현을 지원합니다. 글에서는 기본적인 페이지 준비와 레이아웃 구성 방법을 설명하며, 페이지 내부 링크에는 GatsbyJS의 Link 컴포넌트 사용을 권장합니다.

Link 컴포넌트는 브라우저 기본 동작을 건너뛰고 History API를 사용하도록 하여 페이지 전환 속도 및 애니메이션 구현에 이점을 제공합니다.