Router.replace를 사용하게 된 이유 - 뒤로가기의 무한 굴레

서핏 구경하다가 꽤나 흥미로운 글을 발견했다. 사소한 것이긴 하지만, 나도 이번 프로젝트를 하며 처음으로 고민해봤던 부분이라 블로그에 남겨보기로 결정했다!

---

🥹 Error: 수정 한 번하면 상세페이지 못 나감 이슈 ...

Opener의 수정 flow 구조

수정이 완료된 후, Router.push를 이용해 행사 상세 페이지로 이동시킨다.

 

바로 이 과정에서 하나의 문제가 발생하게 된다...!

 

유저는 당연히 새롭게 진입하게 된 상세 페이지에서 뒤로가기 버튼을 눌렀을 때, 당연히 홈 / 검색 페이지와 같이 상세 페이지에 진입하기 전 페이지로 가기를 원할 것이다.

그러나, Header에서 뒤로가기 기능은 Router.back으로 구현되어 있기 때문에 history의 전 단계로 넘어가게 되고, Router.push를 이용했으므로 수정하기 페이지가 그대로 history에 쌓일 수밖에 없다.

따라서, 빨간색 화살표와 같이 유저가 홈페이지(상세 페이지에 진입하기 전 페이지)로 돌아가기 위해서는 무조건 총 3번의 뒤로가기를 해야되는 것이다.

 

만약 새로 진입한 상세 페이지에서 수정을 한 번 더하게 된다면 어떻게 될까?

홈 -> 상세 -> 수정 -> 상세 -> 수정 -> 상세

이므로 총 5번의 뒤로가기를 해야 홈페이지로 돌아갈 수 있다.

 

그렇다면 수정을 n번 한다면?

홈 -> 상세 -> 수정 -> 상세 -> 수정 -> 상세 -> 수정 -> ... -> 상세

수정을 1번 할 때마다, 유저는 무조건 페이지 기록이 2개씩 쌓이게 된다.

따라서, 수정을 n번 했을 경우 총 2*n+1번 뒤로가기를 해야 홈페이지로 돌아갈 수 있는 셈이다............

 

수정 페이지 담당이었던 나는 이렇게 수정 페이지의 굴레에 빠지게 되었다 . . . . . .

 

✏️ Try1: Header의 router.back을 바꿔 볼까?

가장 직관적으로 떠올린 해결법이었다.

상세 페이지에서 뒤로가기를 누르면, 무조건 홈페이지로 가도록 하면 되지 않을까?

그러나, Opener의 경우 홈페이지, 검색 페이지, 마이페이지 등.. 상세 페이지로 진입하는 경로가 너무 많아서 한 경로로 고정시킬 수가 없었다.

-> 상세 페이지의 진입 경로가 많아 무조건 한 경로로 보내는 것은 너무 위험한 방법이라 판단!

 

✅ Solution1: Router.replace를 써보자!

결론부터 말하자면, 팀원분의 추천으로 Router.push 대신 Router.replace를 채택하게 되었다.

replace와 push의 차이점

1. 수정 페이지에서 push를 써서 상세 페이지로 보내는 경우

- 수정 페이지가 history에 남게 된다.

- 결론: 무한굴레 ......

 

2. 수정 페이지에서 replace를 써서 상세 페이지로 보내는 경우

- replace는 현재 페이지를 새로운 페이지로 바꿔주는 개념이라고 보면 된다.

- 수정 페이지를 상세 페이지로 아예 바꿔주는 셈!

- 따라서 수정 페이지 자체가 history에 남지 않는다.

 

 

그러나, replace를 쓰는 경우에도 문제는 남아 있다 ㅠ_ㅠ

홈 -> 상세 -> 상세(수정)

history가 이렇게 남기 때문에 총 2번 뒤로가기를 해야지만 홈페이지로 갈 수 있다 ...

 

그래도 2*n+1번 보다는 n+1번으로 줄었으니까..!체감상 확실히 무한굴레는 빠져나온 것 같은 느낌이다.

 

✅ Solution2

이 글을 쓰다가 방금 생각난 완전한 해결법인데

Opener ver1.0은 결국 위에 Solution1(n+1번)로 배포를 진행했다.

현재는 수정하기 진입이 Link 태그라 history에 남게 되는데 수정하기 진입도 Router.replace로 해주면

홈 -> 상세(수정)(상세)

이렇게 history가 돼서 한 번만 뒤로가기를 해도 홈페이지로 돌아갈 수 있다 !!!!!!!!!!

---

드디어 Opener 1.0이 배포되었다!

이 글을 시작으로... Opener 1.0 개발하면서 겪은 점들을 쫌쫌따리,, 올려보려고 한다,,,,,

과연 꾸준히 쓸 수 있을지... 하핫 ;;