⇒ 링크가 바뀌지 않는다면 브라우저 차원에서 남는 history가 없기 때문에 뒤로 가기, 앞으로 가기를 할 링크 자체가 존재하지 않는다.
history를 직접 구현
→ recoil의 Atom을 활용해 전역 상태값으로 history를 구현한다. 하위 페이지로 이동할 때 history가 Atom에 하나씩 추가되며, 뒤로 가기를 시도할 때 history에서 하나씩 제거된다. 즉, Stack의 형태를 활용하면 구현이 가능하다.
→ 장점: 구현이 쉽다. 전역 상태값 하나 설정하고 하위 페이지로 이동하는 곳마다 설정, 뒤로가기 버튼을 추가 후 클릭할 때마다 설정만 하면 구현이 가능하다.
→ 단점: 브라우저 차원에서 뒤로가기, 앞으로가기가 불가능하다. 결국 링크는 그대로 유지되기 때문에 브라우저는 view의 변동을 인식할 수 없다.
주소가 바뀌도록 구현
→ history API 혹은 react router를 활용하여 링크를 직접 옮기면서 브라우저에 view의 이동 기록을 남기고 뒤로가기, 앞으로가기를 구현한다.
→ 장점: 브라우저 단에서 페이지 이동이 가능하다. 사용자의 UX가 개선되는 측면이 있다. SPA를 유지하면서, 즉 페이지가 리로딩되지 않으면서 페이지가 이동되는 효과를 누릴 수 있다.
→ 단점: 지금까지 페이지가 이동되던 방식이 크게 바뀔 수 있다. 모달만 띄우는 방식으로 지금까지 유지하다가 링크를 변경하는 방식으로 변경할 경우 부담이 커질 수 있다.
동민님의 코드에서 링크 변경 없이 페이지의 이동이 되는 것을 확인, 학습 필요
