리액트 스크롤 위치 유지 방법이 궁금합니다.

안녕하세요. 이틀이 지났는데, 문제 해결하셨는지 모르겠습니다. 일단 제가 알고 있는 선에서 답변을 드리겠습니다. 만약 제가, 질문자님과 같이 스크롤 위치 유지 방법을 구현한다면, 쿼리 파라미터를 사용할 것입니다. 예를 들어, id값이 33번인 게시글 페이지에 이동한 후에, 이전 페이지로 돌아가기 위한 [뒤로 가기]버튼(게시글 리스트로 돌아가는 버튼)을 만들고 여기에 쿼리 파라미터를 넣어주는 로직을 작성할 것입니다. 쿼리 파라미터를 만드는 방법은 chat gpt나 구글링을 통해서 쉽게 알 수 있으니까 생략하겠습니다. [뒤로 가기]버튼을 클릭하면 url은 /board?id=33 ('id'는 제가 임의로 명칭 하였습니다) 로 바뀔 것입니다. 그리고 게시글 리스트로 돌아왔으니, 처음에 게시글 리스트를 요청하는 코드가 실행 됐을 것이라고 생각합니다. 그러면 게시글 리스트를 불러오고 난 뒤, url에 있는 id, 즉 33이라는 값을 가져와서 해당 값에 해당하는 게시글로 스크롤이 이동하도록 하는 코드를 실행하게 하면 될 것입니다. (이 부분도 구글링 하면 잘 나와 있으니 검색하시면 되겠습니다.) 그리고 세션스트로지도 이와 유사한 흐름으로 코드를 작성하시면 되지 않을까 싶습니다. 예를 들어 33번 게시글로 이동하는 버튼을 누를 때, 세션 스트로지에 set하시고 나중에 게시글 리스트로 돌아갈 때, 게시글을 불러오고 난 뒤, 세션 스트로지를 get하고 스크롤이 이동하도록 하는 코드를 실행하게 하면 될 거 같습니다. 쿼리 파라미터와 세션 스트로지의 장단점을 비교해 보시고, 기획하신 방향 대로, 사용하시면 되지 않으실까 합니다. 감사합니다.

스크롤 위치를 저장하고 이전 페이지로 돌아갈 때 이를 복원하는 것은 리액트에서 꽤 흔한 시나리오입니다. 여기 간단한 방법을 설명드리겠습니다. 1. 스크롤 위치 저장: 페이지를 벗어나기 전에 스크롤 위치를 로컬 스토리지에 저장합니다. 이를 위해 ' componentWillUnmount ' 라이프사이클 메서드 또는 ' useEffect '의 클린업 함수를 사용할 수 있습니다. 2. 스크롤 위치 복원: 댓글 페이지로 돌아올 때 저장된 스크롤 위치를 사용하여 페이지를 이동시키고자 합니다. 이를 위해 ' componentDidMount ' 라이프사이클 메서드 또는 ' useEffect '를 사용할 수 있습니다. 이렇게 하면 댓글 페이지를 벗어날 때 스크롤 위치를 저장하고, 페이지로 돌아왔을 때 이전 스크롤 위치로 복원합니다. 이 코드는 단순한 예제이며, 실제 애플리케이션에서는 조금 더 정교한 처리가 필요할 수 있습니다. 예를 들어 댓글에 고유한 ID를 사용하여 스크롤 위치를 복원하는 것도 가능합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#1
import React, { useEffect } from 'react';

const CommentPage = () => {
  useEffect(() => {
    return () => {
      const scrollPosition = window.pageYOffset;
      localStorage.setItem('scrollPosition', scrollPosition);
    };
  }, []);

  // 나머지 컴포넌트 코드
};

#2
import React, { useEffect } from 'react';

const CommentPage = () => {
  useEffect(() => {
    const savedScrollPosition = localStorage.getItem('scrollPosition');
    if (savedScrollPosition) {
      window.scrollTo(0, parseInt(savedScrollPosition, 10));
      localStorage.removeItem('scrollPosition');
    }
  }, []);

  // 나머지 컴포넌트 코드
};