React(리액트) 로그인 이후 이전 페이지로 이동, 페이지 저장하기

카카오 로그인 이후 이전 페이지로 이동

누군가 보시고 더 좋은 방법이 있다면 제발 댓글 남겨주세요!

카카오 로그인 과정

이건 소스가 많고 또 개발자 페이지에 너무 잘 정리되어 있기 때문에 간략하게 넘어가 보자면,
카카오에서 Rest API 키 Redirect URL을 입력한 URL로 이동을 하면( a태그 또는 window.location.href를 이용했다) 인가 코드를 URL에서 받을 수 있고 그 인가 코드를 백엔드에게 전달해 백엔드에서 토큰을 받는다(정확한 로직은 모른다)

어쨌든 백엔드에서 토큰을 전달받고, 우리는 그 토큰을 가지고 매 요청마다 넣어주면 된다.

본론

로그인 이후 이동을 메인 페이지로 했었는데, client가 어딘지도 모르는 글을 보다 댓글을 달려고 로그인을 했더니 url을 못 찾는다? 물론 뒤로 가기로 찾아갈 수 있지만, 이건 사용자 친화적이지 않다고 생각했다.

방법 - 세션 스토리지 이용
간단하게 로그인 버튼을 눌렀을 때 현재 url을 세션 스토리지에 저장 후, 로그인이 완료가 되면 저장된 url로 이동을 시켜줬다.

세션 스토리지를 이용한 이유?
크게 생각하지는 않았다. 계속 가지고 가야할 데이터가 아니고, 보안에 신경 써야 하는 정보도 아니기 때문에 세션 스토리지가 편리하고 제일 간단할 것 같다는 생각이 들었다.

내가 실패한 방법

redux를 사용하고 있는데 전역 상태관리로 url을 저장하는 방식을 처음에 시도했다. 이 방법은 처참히 실패했는데, 내가 a태그나 window.location.href가 react에서 좋지 않은 이유를 잘 파악하지 못했기 때문이다.

react는 SPA로 빠른 페이지 전환이 장점이라고 생각한다. 그래서 새로고침을 하고 싶지 않다. 기껏 관리하던 state가 다 날아가기 때문에......
a나 window.location.href는 새로운 페이지로 이동을 시킨다. 즉 새로고침이 포함된다고 볼 수 있을 것 같다. (이래서 a태그를 안 쓴다고 한 것이구나....)

그래서 redux에서 store로 관리하는 url데이터가 날라갔다. 여러 방법을 고민한 끝에 세션 스토리지로 편하게 넘어가기로 했다.

제발 섹시한 방법이 있다면 공유해주세요 ! ㅠㅠ