react 상세 페이지 이동 후 이전 목록으로 돌아가기

item 목록에서 , 상세 페이지로 이동후에 뒤로 가기를 하면 이전 목록이 유지되어야 한다
* item 리스트가 그대로 있어야 한다.
* 스크롤이 이전 진입 시점 이어야 한다.
* 빠르게 로딩이 되어야 한다.

위 기능을 어떻게 구현할까? 개발자가 아니라면 당연히 되어야 할거 같은게 당연히 지원되지 않는다.

서버사이드 렌더링 페이지 라면, 더욱이 까다로울 수 있다. 현재 delog.io는 nextjs 를 사용해 서버사이드 페이지가 기본으로 동작하고 있다.

내가 구현한방법은 history 객체를 사용 하였다.
history 객체는 새로 고침을 하기 전까지 상태 유지가 된다. 페이지 이동이 필요할때 사용하기에 적합하다.

1. 목록을 로드한다.  
  * 목록을 히스토리에 저장한다.
2. 아이템을 선택시에 스크롤위치를 history 에 저장한다. (목록으로 돌아올때 위치를 돌려놓기 위해)
3. 상세 페이지에서 뒤로 가기버튼을 누르면,
   * 상세페이지에서 왔다면 캐시된 데이터를 뿌려준다.
  * 스크롤을 이전에 저장한 위치로 돌려 놓는다.

위와 같은방법으로 서버사이드 렌더링에 적용을 하였다.