프론트엔드 스크롤 복구, 5가지 꿀팁 대방출!
by DD
11개월 전
조회수 9
SPA 환경에서 스크롤 복구는 사용자 경험을 저해하는 주요 문제임
정적/동적 데이터, 레이지 로딩, 가상화 등 상황별 해결 방법 제시
React Query 활용, 스켈레톤 UI 적용 등 실전 코드 팁 제공
SPA 스크롤 복구의 기술적 난제
SPA 환경에서 브라우저의 기본 스크롤 복구 기능은 작동하지 않는다. 구체적으로 History API를 활용하여 스크롤 위치를 저장하고 복구하는 방법이 있다. 따라서 데이터 로딩과 동적 콘텐츠 변화에 대응하는 전략이 필요하다.
상황별 스크롤 복구 전략 비교
정적 데이터 환경에서는 History API를 활용하여 간단하게 해결 가능하다. 반면 동적 데이터 환경에서는 스크롤 위치와 함께 아이템 정보를 저장해야 한다. 따라서 레이지 로딩과 가상화 환경에 맞는 별도의 접근 방식이 필요하다.
React Query와 가상화의 꿀조합
React Query를 사용하면 데이터와 스크롤 상태를 함께 관리할 수 있다. 구체적으로 캐싱된 데이터를 활용하여 즉시 스크롤을 복구한다. 따라서 무한 스크롤과 가상화 환경에서 사용자 경험을 개선할 수 있다.
