🛠️ 쿼리스트링 추가 후 뒤로가기가 안되는 문제

📌 문제 상황

2023.09.01 ~ 2023.09.27 동안 진행했던 앙골라 프로젝트에서 특정 포스트 자세히보기 페이지로 이동하는 상황이 있었다.

홈화면(/) 또는 특정 포스트 페이지(/post/postId)에서 특정 포스트 자세히보기 페이지(/post/postId?show=true&voted=true)로 이동했을 때, 뒤로 가기를 2번 해야 특정 포스트 페이지로 돌아가거나, 뒤로 가기 버튼을 아무리 눌러도 뒤로가기가 적용되지 않는 현상이 발생했다.

---

📌 원인

문제의 첫 번째 원인은 url의 history에 쿼리스트링을 변경하는 동작들이 쌓이고 있던 것이다.

특정 포스트 자세히보기 페이지로 이동할 때,

/postId ⇒ /postId?show=true ⇒ /postId?show=true&voted=true

위와 같은 단계로 url이 변경되고 있었고, setSearchParams 함수를 통해 쿼리스트링이 차례대로 추가되고 있었다.

개발자 도구를 열어 history를 확인해보니, setSearchParams를 통해 쿼리스트링에 데이터를 추가해 url을 변경해주는 동작들이 history stack에 쌓이고 있었던 것이다.

즉, navigate() 메서드로 주소를 이동할 때와 마찬 가지로 쿼리스트링을 추가하는 동작도 history에 쌓이는 것이다.

두 번째 원인은 useEffect 훅 내에 쿼리 스트링을 추가해주는 setSearchParams 함수가 여러번 호출되어 history가 여러 번 쌓였던 것이다.

컴포넌트의 비즈니스 로직 부분에서useEffect 훅 내에 쿼리 스트링을 추가해주는 setSearchParams 함수가 호출되고 있었는데, useEffect의 의존성 배열에 여러 변수 및 함수가 들어가 있어서, useEffect 훅이 많이 호출되고 있었고, 그 안에서 쿼리 스트링을 추가해주는 동작이 어러번 되어 history가 많이 쌓이고 있었던 것이다.

그래서 뒤로가기 동작을 눌렀을 때, history가 많이 쌓여서 뒤로 가기 버튼을 2번 눌러야 원하는 페이지로 돌아가기도 하고, /postId?show=true&voted=true에서 /postId?show=true로 돌아가면 여기서 자동으로 /postId?show=true&voted=true로 다시 보내줄 때도 있어서 뒤로 가기 버튼을 아무리 눌러도 원하는 페이지로 돌아가지 않을 때도 있었다.

---

📌 해결 방법

1. useEffect 내의 setSearchParams 함수에 replace 옵션을 주어 url의 history에 쿼리스트링을 변경하는 동작들이 쌓이지 않도록 변경해주었다.

   setSearchParams( , { replace: true} );

2. useEffect 훅 내, 의존성 배열에 필요없는 함수와 변수들을 제거해줌으로써 useEffect 내 setSearchParams 함수가 많이 실행되지 않도록 변경주었다.