React Next infinite scroll

Next.js와 리액트를 이용한 인피니티 스크롤 구현에 있어서, 페이지 갔다가 돌아왔을 때의 데이터와 스크롤 위치 유지는 어렵지 않은 편입니다. 데이터 부분은 Redux나 MobX 등의 상태 관리 라이브러리를 활용하여 앱 전체에서 사용될 수 있는 공통 상태로 만들어 사용하시면 됩니다. 이 방법을 이용하면 다른 페이지로 이동했다가 되돌아 오더라도 Redux Store에 저장된 데이터는 그대로 유지되기 때문에 새롭게 데이터를 불러오는 것이 아니라 기존에 불러왔던 데이터를 계속해서 사용할 수 있습니다. 스크롤 위치는 'scroll-behavior' CSS 속성을 'auto'나 'smooth'로 설정해주면 자연스럽게 스크롤되는 효과를 줄 수 있습니다. 추가적으로 window 객체의 scrollX와 scrollY 값을 확인하여 현재 스크롤 위치를 파악하고, 필요할 경우 window 객체의 scrollTo 함수를 이용해 원하는 위치로 스크롤 할 수 있습니다. 그리고 페이지 전환 시 router.query 스트링 등을 활용하여 둘러보고 있는 리스트의 인덱스 정보나 페이지 정보 등을 넘겨주고, 해당 페이지에서 다시 해당 정보를 받아 처리하는 방식을 사용하면, 사용자가 둘러보던 위치를 그대로 유지할 수 있습니다. 이런 것들을 모두 조합해서 사용하면 페이지 전환 후에도 랜더링이 부드럽게 이루어지고, 데이터와 스크롤 위치 역시 유지되는 사용자 경험을 제공할 수 있을 것입니다.