React | 로그인 시 이전페이지로 돌아가기 (feat.sessionStorage)

프로젝트를 진행하며 카카오 로그인으로 로그인 서비스를 구현하였다. 로그인은 문제가 없으나 로그인 후 특정페이지로만 이동되어 로그인 이전의 페이지로 돌아가는 것을 구현하려고 하였다. 그래서 redux를 활용하여 이전 페이지 주소를 store에 저장하는 방식으로 구현하려고 했으나 redirect되며 store에 있던 데이터가 사라졌다.

고심한 끝에 token을 저장하는 방식처럼 세션스토리지에 저장하면 되지 않을까 아이디어가 떠올라 그렇게 시도했더니 되었다...

로그인 구현은 cookie,localStorage,sessionStorage 등 방법이 많으니 각자 사용하는 방식대로 저장하면 될 것 같다.

내가 이용한 로직은 이렇다.

1. 로그인 버튼이 위치한 Navbar에 로그인 클릭시 SessionStoage에 useLocation을 이용하여 주소를 저장한다.

/Navbar.js

				<button
                className="p-2 text-slate-300"
                onClick={() => {
                  const LOCATION = state.pathname;
                  sessionStorage.setItem('Location', LOCATION);
                }}
              >
                로그인
              </button>

2. 로그인 성공시 저장된 주소를 불러와서 이동시켜준다.

instance
          .kakaoLogin()
          .then((res) => {
            console.log('res', res);
            navigate(sessionStorage.getItem('Location') ? sessionStorage.getItem('Location') : '/');
            console.log(sessionStorage.getItem('Location'));
          })
          .catch((err) => console.log('err', err));

사용된 hook : useLocation, useNavigate