뒤로가기 무한 증식 없애기 #리액트 2차 개인과제 리팩토링

간단한 과제 소개

• 포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 
• 포켓몬 상세 정보를 확인할 수 있다.

---

상세페이지에서 뒤로가기가 무한 증식되는 걸 변경했다. 위에 보이는 사진에서 사진을 누르면 포켓몬 상세페이지로 이동한다. 상세페이지는 이렇게 생겼다. (css 아직 하기 전인데 사진 올리기 창피하네요)

사진에서 보이는 이전, 다음 포켓몬 버튼을 누르면 다음 넘버를 가진 포켓몬의 상세페이지로 이동된다. 기존 구현은 `Router` 를 사용해서 `/Detail/:id`와 같은 경로로 이동하도록 구현했다. 이렇게 구현하니 포켓몬 몇 개 구경하면 상세페이지에서 갇혀버린다... 

 

따라서 너무 귀찮았지만 `Router` 설정부터 `navigate` 등등...정말 귀찮았지만 변경하기로 큰 결심을 했다.

 

"일단 코드가 아닌 구조, 방식으로 진행하겠숩니다. "

💡 기존 방식

•  `Router.jsx`에서 상세페이지(`Detail.jsx`)에 해당하는 경로를 `/Detail/:id` 이런 식으로 설정
•  리스트에서 포켓몬 카드를 누르거나, 이전, 다음 버튼을 누르면 `navigate`로 `id`를 전달
• `Detail` 컴포넌트에서는 `useParams`를 사용해서 `id`를 받아와서 포켓몬 데이터 출력

 

📍 문제점

• 사람에 따라 다르겠지만 뒤로가기 했을 때 리스트페이지가 나오지 않는 것이 불편했다.

---

💡 변경 방식

•  `Router.jsx`에서 상세페이지 경로를 아주 정상적이게, 쓸데없는 id를 받지 않도록 설정
• 포켓몬 카드를 누르거나, 이전, 다음 버튼을 누르면 해당 포켓몬의 `id`를 store(전역)에 저장
• store에 저장된 `id`를 기반으로 상세페이지의 컴포넌트 교체

 

페이지의 이동이 아닌 컴포넌트를 교체하는 방식으로 변경했다.

 

 

💡 궁금점

교체하기전의 방법이 뭔가 좀 더 올바른 방법이 아닐까 생각이 든다. (뒤로가기 문제만 제외하면) 원래 웹사이트 돌아다니다 보면 url을 수정해서 원하는 데이터를 딱 찾는걸 많이 썼었다. 예를 들어 `www.abc.com/page?=1` 이라는 url에서 페이지를 좀 많이 이동하고 싶으면 url부분을 수정해서 찾고는 했다. 하지만 url 요청으로 데이터를 불러오는게 아닌, 컴포넌트만 띡 하고 변경해버리면 저런 방법을 사용할 수 없다.  

 

따라서 `Router` 설정에서 파라미터를 전달 받지만 뒤로가기는 무시(?)하는 그런게 있나 찾아봐야할 것 같다.