GatsbyJS로 SPA 페이지 전환, 부드러운 애니메이션으로!
by DD
7년 전
조회수 2
SPA 환경에서 페이지 전환 시 애니메이션을 적용하는 방법을 소개
GatsbyJS의 History API와 react-transition-group 라이브러리 활용
gatsby-plugin-layout 플러그인을 사용하여 레이아웃 컴포넌트 관리
SPA 애니메이션의 핵심 원리
SPA는 자바스크립트 실행 컨텍스트를 유지하여 페이지 전환 시 부드러운 애니메이션을 가능하게 한다. History API를 활용하여 페이지 이동을 관리하며, react-transition-group 라이브러리를 통해 Transition 효과를 구현한다. 따라서, 페이지 전환 시점의 DOM 제어가 핵심이다.
GatsbyJS 레이아웃 관리 심층 분석
GatsbyJS에서 페이지 전환 애니메이션을 위해 gatsby-plugin-layout 플러그인을 사용한다. wrapPageElement API를 활용하여 레이아웃 컴포넌트의 언마운트를 방지하고, TransitionGroup 컴포넌트로 애니메이션을 제어한다. 결과적으로, 페이지 전환 시점에 레이아웃을 유지하여 부드러운 애니메이션을 구현한다.
react-transition-group 활용법
react-transition-group 라이브러리의 TransitionGroup과 Transition 컴포넌트를 사용하여 애니메이션을 구현한다. Transition 컴포넌트는 전환 상태에 따라 다른 스타일을 적용하며, entering, exiting 상태를 활용하여 애니메이션 효과를 제어한다. 따라서, CSS transition 속성을 사용하여 부드러운 전환 효과를 만들 수 있다.
