[TIL] 무한스크롤의 디테일 (스크롤 위치 기억하기)

useInfiniteQuery 를 사용하여 멋지게 무한스크롤을 완성하였지만, 무한스크롤에서 챙겨야 할 디테일은 끝나지 않았다.!
무한스크롤은 단순히 스크롤이 바닥에 닿았을 때 데이터를 불러오는 것에서 끝나는 것이 아니었다.!

<유저가 무한스크롤이 적용된 페이지에서 겪게 될 경험>
1. 원하는 검색어를 입력하고 스크롤을 쭉쭉 내리면서 클릭할만한 장소카드를 탐색한다.
2. 장소카드를 클릭하여 장소 상세 페이지로 들어간다.
3. 옆에 있던 다른 장소카드가 궁금하여 뒤로가기를 클릭한다.
4. 스크롤이 다시 최상단으로 올라가버린다..!
5. 이전에 클릭하려던 장소카드를 찾으려면 다시 스크롤을 왕창 내려야 한다..!!!

React Query 덕분에 데이터는 전부 유지되고 있지만, 스크롤이 최상단으로 복구되어
이전까지 탐색하던 위치를 유지하지 못한다.

이런 문제를 해결하기 위해 로컬 스토리지를 활용해보자!

useLocalStorage

로컬스토리지를 활용하면 스크롤 복구를 구현하기 쉽다.
먼저 장소상세로 이동하기 전에 window.scrollY 위치를 저장하고
다시 장소검색 페이지로 돌아왔을 때 useEffect로 스크롤 위치를 복구시키면 된다.

먼저 use-local-storage 라이브러리를 설치하자

yarn add use-local-storage

useLocalStorage 는 useState 와 사용 방법이 유사하다.
다른 점은 데이터의 key 이름과, 처음으로 가질 값 두 개를 인자로 받는다는 점이다.
일반적인 방법으로 react에서 localStorage에 접근해서 값을 쓰고 가져온다고 해도 state가 아니기 때문에
화면을 다시 그리지는 않는데 useLocalStorage는 값을 저장하면서도 값이 변경될때마다
화면을 업데이터하는 것이 큰 장점이라고 한다.

const [value, setValue] = useLocalStorage("name", initialValue)

장소카드 코드에서 스크롤 위치를 기억하는 코드를 추가하자.

// 장소카드 컴포넌트

const PlaceCard = ({ place }: Props) => {
  const [scrollY, setScrollY] = useLocalStorage('places_list_scroll', 0);

  return (
    <Link
      href={`/place/${unique_place_id}`}
      onClick={() => setScrollY(window.scrollY)} // 스크롤 위치를 로컬스토리지에 저장
    >
// 생략
  </Link>
  );
};

그러면 장소카드를 클릭해서 장소상세로 이동할 때, 로컬스토리지에 스크롤 위치를 저장하게 된다.

그리고 뒤로가기를 클릭해서 다시 장소검색페이지로 돌아왔을 때,
이전 스크롤 위치를 기억해서 복구하기 위한 코드를 추가하자.

// 장소검색 페이지 (무한스크롤이 구현된 페이지)
const [scrollY] = useLocalStorage('places_list_scroll', 0);

 useEffect(() => {
    // 기본값이 "0"이기 때문에 스크롤 값이 저장됐을 때에만 window를 스크롤시킨다.
    if (scrollY !== 0) window.scrollTo(0, scrollY);
  }, [scrollY]);

그러면 뒤로가기를 클릭했을 때 이전 스크롤 위치로 복구된다.!!!
이를 추가하면 유저의 탐색 경험을 더욱 즐겁게 해줄 수 있다~~!

점점 완성도가 높아져 가는 모습을 보니 뿌듯하다.
이제 진짜 얼마 안남았으니 이제 코드 완성도를 높이자!