[프로젝트] router.push와 router.replace

아무리 '뒤로 가기'버튼을 눌러도 https://www.recordyslow.com/mypage?tab=로그인정보에서 벗어나지지 않는 현상이 발생함

  useEffect(() => {
    const { tab } = router.query;

    // URL 파라미터에 따라 활성 탭 설정
    if (tab === "장바구니") {
      setActiveTab("장바구니");
    } else if (tab === "로그인정보") {
      setActiveTab("로그인 정보");
    } else if (tab === "기본배송지") {
      setActiveTab("기본 배송지");
    }

    // URL 파라미터가 없을 경우, "로그인정보" 탭으로 설정하고 URL에 파라미터를 추가
    if (!tab) {
      setActiveTab("로그인정보");
      router.replace("/mypage?tab=로그인정보");
    }
  }, [router.query]);

이런식으로 tab을 선택하지 않은 상태(마이페이지 버튼을 눌렀을때)는 '로그인 정보' 탭으로 가게해놓음.
하지만, 이렇게 하니 뒤로 가기를 아무리 눌러도 '로그인 정보' 탭에서 벗어나지지가 않음.

해당 코드를

router.replace("/mypage?tab=로그인정보");

이렇게 변경했더니, 이전페이지로 잘 이동이 됨.

router.push vs router.replace

router.push와 router.replace의 주요 차이는 브라우저 히스토리에 새 항목을 추가하느냐 아니냐에 있음.

router.push

새로운 URL로 이동하면서 브라우저 히스토리에 새로운 항목을 추가함
뒤로가기 버튼을 누르면 이전에 방문한 페이지로 이동하게 됨
새로운 페이지로 이동한 흔적이 브라우저 히스토리에 남음

-> 보통 상황이면 잘 작동해야되는 것이지만, 해당 경우는 마이페이지 버튼을 눌러서 접근하기 때문에, 마이페이지 버튼을 누르면서 해당탭('로그인정보')이 이전 기록으로 push되어버리는 현상이 발생함. 그래서 아무리 뒤로가기 버튼을 눌러도 '로그인 정보' 탭이 이전 페이지가 되는 현상이 발생하는 거임

router.replace

현재 페이지의 URL을 새로운 URL로 교체하면서 브라우저 히스토리에는 새 항목을 추가하지 않음
뒤로가기 버튼을 누르면 현재 페이지 전전의 페이지로 이동
새로운 페이지로 이동한 흔적이 브라우저 히스토리에 추가되지 않음

설명이 애매할 수 있지만, 결론은 마이페이지 버튼을 통해 해당 탭을 강제로 '로그인 정보'로 지정하는 상황이기 때문에, router.push를 사용하면 이전 페이지가 '로그인 정보'로 history가 추가되어 뒤로가기 버튼을 눌러도 '로그인 정보' 탭에서 벗어나지지 않기 때문에, router.replace를 사용하여 대체하고 history에 '로그인 정보' 탭을 저장하지 않으면 됨.

.
.
.
끝

🫠