TIL 85. 뒤로가기 스크롤 유지 시키기

메인 페이지에서 상세 페이지로 진입 후, 뒤로가기를 하게 되면 최상단에 스크롤이 위치하게 되는데
그런 경우에는 사용성이 좋지 못하게 된다.

그래서 디테일 페이지에 진입할 때 스크롤 좌표 값을 storage에 저장하고,
뒤로가기를 한 후 mount가 됐을 때, 저정한 스크롤 값을 불러와서 스크롤을 위치시켜주었다.

// 중략

// 아이템 클릭 시 스크롤 위치 저장
  const saveScroll = () => {
    sessionStorage.setItem('scrollY', String(window.scrollY));
  };

  // 뒤로가기로 메인 페이지 진입 시 스크롤 위치 복원 및 삭제
  const scrollRevert = () => {
    window.scrollTo(0, Number(sessionStorage.getItem('scrollY')));
    sessionStorage.removeItem('scrollY');
  };

  useEffect(() => {
	scrollRevert();
    setChatToggle(false);
  }, []);

// 중략

	<ItemBox key={uuidv4()} onClick={saveScroll}>
		<Content item={item} />
	</ItemBox>

// 중략