3시간은 머리 싸맨거같은 브라우저 뒤로가기 버튼 클릭시 이전 페이지로 보내기 ( next.js + react 같은 페이지 내 컴포넌트 갈아끼우는거)

 

 

 

https://warn-code.tistory.com/300

next.js에서 하나의 페이지에 여러 컴포넌트 갈아끼워지는것처럼 만들기 / 리액트 라우터돔처럼

 

앞전에 next에서 컴포넌트를 갈아끼우는 로직까지는 성공했는데

(궁금하면 위 포스팅 참고!!!!)

 

 

오늘은 또다른 고민이 나를 붙잡았다

바로바로 컴포넌트를 갈아끼워주는 식으로 브라우저 상 보여지는건 성공했다고 치는데,

실제로 url은 변화하지 않고 (리액트의 라우터돔 사용할때는 url까지 바뀌었자농) state 값이 변화하면서 안보이고 보이고가 결정이 나는거였기 때문에

 

실제로는 "뒤로가기" 버튼을 해봤자

예를 들어, "로그인 컴포넌트" => "회원가입 컴포넌트" 

이런식으로 마치 페이지가 이동하는 것처럼 보이지만, 브라우저의 뒤로가기 버튼을 누르면

사용자는 아까부터 쭈욱- 한페이지에서 머물고만 있었던 거기 때문에 브라우저의 뒤로가기 버튼을 누르면 진짜 바로 "이전 페이지"로 돌아가서, 사용자가 기대한 페이지인(실제로는 똑같은 페이지지) 로그인 페이지가 보이지 않게 되는 것이다

 

회원가입을 하려다가 하기 싫어져서, 그냥 브라우저 뒤로가기 버튼을 누를 수도 있는데

사용자는 당연히 "로그인 창"에서 "회원가입하기"를 눌렀기에, "로그인 페이지"로 돌아갈것이라고 기대할것이지만

실상 만나는건 로그인 페이지 이전에 머물렀던 다른 페이지인것

 

이게 굉장히 눈에 거슬리기 시작했고, 진짜 몇시간을 붙들고

(이러고 꼭 마지막 해결법은 간단해쥐쥐!!!!!!!!!!늘 그런식이야 넌!!!!!!!!!!!!!!!!!!)

결국 해결한 자랑스러운 코드 소개 >_<

  useEffect(() => {
    window.history.pushState(null, "null", document.URL);
    window.addEventListener("popstate", function (event) {
      const result = window.confirm("정말 나가시겠습니까?");
      if (result) {
        window.location.replace(`/loginPage`);
      }
      if (!result) {
        return false;
      }
    });
  }, []);

 

(모가 모질라니 모질라 window.history.pushState 설명)

https://developer.mozilla.org/ko/docs/Web/API/History/pushState

History.pushState() - Web API | MDN

 

 

 

깔꼼하게 표현하면, 저 document.URL은 말그대로 현재 url을 의미하고 이 pushState 메서드를 이용해서 브라우저의 세션 기록 스택에 상태를 추가하는 것이다.

 

그렇게 pushState가 실행이 되면, addEventListner가 popstate의 변경을 알아차리고

(pushState에 넣어줬던 첫번째 인자값 state는 새로운 세션 기록 항목에 연결할 상태 객체이고, 사용자가 새로운 상태로 이동할 때마다 popstate 이벤트가 발생하는데, 이 때 이벤트 객체의 state 속성에 해당 상태의 복제본이 담겨진다고 한다.)

내가 콜백함수로 넣어준 함수를 실행시키는것이다.

 

나는 콜백함수에 사용자가 confirm 버튼에서 "예"를 누르면, 값이 true를 받을테니 result라는 객체를 만들어서 result가 true일때는 로그인 페이지를 다시 랜더하는 방식으로 로직을 작성했고 

이런식으로 하는게 맞는 방법인지는 모르겟지만 몇시간을 이잡듯 찾다가 내가 구현하고 싶었던 기능이 성공되는게 보이니 너~~무 행복했던 순간이었다

 

미래의 나야

나 맞게한거 맞늬...?

피드백좀 주렴ㅎㅅㅎ.......❤️

 

 

 

 

( 구글링 오지게 하다 찾아냈던 스택오버플로우 )

https://stackoverflow.com/questions/67372914/detect-when-browser-back-button-is-pressed-reactjs

Detect when browser back button is pressed - ReactJS