queryString 으로 상세페이지 이동하기

Query String?

쿼리스트링(Query String)은 URL의 일부로, 웹 페이지에 전달되는 추가적인 데이터를 담는 방법이다.

URL 뒤에 ?로 시작하여 key=value 형태의 파라미터를 추가하는 방식

http://example.com/page?key1=value1&key2=value2

• 여기서 ?는 쿼리스트링의 시작을 나타낸다
• key1=value1 : 키-벨류 한쌍
• & : 여러개의 키-벨류 쌍을 구분하는 구분자

그러면 해야할일

• 라우터에 디테일 페이지를 추가해준다.
• 리스트에서 아이템 목록을 하나 클릭한다 > 디테일 페이지로 이동한다.
• 클릭할때 쿼리스트링을 넘겨주어서 디테일페이지에서 쿼리스트링을 읽어서 선택한 아이템의 상세페이지를 출력한다

카드 아이템.jsx 에서 해줘야할일

• 각 아이템 클릭시 해당 아이템의 id를 쿼리스트링으로 넘긴다.
• 그리고 페이지를 디테일페이지로 이동한다.

onClick={() => handleGotoDetail(list.id)}

• handleGotoDetail 함수를 호출하면서 list의 id를 넘겨준다.

useNavigate();

• 리액트 라우터 훅으로, navigate 함수를 반환한다. 이함수를 호출하면 원하는 url로 이동한다.

navigate(`/detail?id=${id}`);

• 쿼리스트링 ?을 포함하여 디테일 페이지로 이동한다.

그러면 진짜 url을 확인해보자.

 

id값 4를 가지고있는 아이템을 클릭 한 후 url을 보면 navigate(`/detail?id=${id}`);  /detail?id=4 로 알맞게 이동한걸 볼수있다.

 

디테일 페이지에서는 해당id를 가진 정보를 불러와주기만 하면 된다!

 

디테일 페이지에서 해주어야 할 일

• 쿼리스트링 값 읽기
• 쿼리스트링 값에 맞는 데이터 ui에 노출하기.

  const [searchParams] = useSearchParams();
  const getQueryId = searchParams.get("id");

 

우선 아까 보내준 쿼리스트링을 읽어와야한다. 

useSearchParams()는 쿼리스트링 값을 읽고 수정할수 있는 훅이다.

훅을 통해 쿼리파라미터를 가져온후, 그 파라미터의 키가 id인 값을 가져온다.

 

그런다음, 데이터에서 파라미터의 키가 id인 값과 동일한 id를 가진 몬스터의 정보를 ui에 뿌려주면 된다.