[Pokemon PJ_Day 3]Dynamic Route와 QueryString

QueryString으로 포켓몬 디테일 페이지 구현하기가 오늘의 목표이다.

 

아래는 내가 구현한 페이지

 

 

 

Dynamic Route(useParams 사용)

 

📍Dynamic Route 란?

• 동적 라우팅
• path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법

 

📍예시 :
어떠한 페이지에 여러 요소가 있으며 각 요소마다 독립적인 페이지를 갖도록 구현하기 

• Detail 페이지의 path에 :id 추가하기
  • 동적인 값을 받겠다는 의미
  • useParams 훅에서 조회할 수 있는 값

 // src/shared/Router.jsx
 <Route path="/detail" element={<Detail />} />
 👇🏻
 <Route path="/detail/:id" element={<Detail />} />

 

📍useParams

• path의 있는 id 값을 조회할 수 있게 해주는 훅 
• 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회

  const Detail = () => {
   const params = useParams();  👉🏻Router에서 동적 라우팅으로 정해놓은 값(id)
       console.log("params", params);  👉🏻{id: 6} 의 형식으로 콘솔창에 찍힘
      
     // 배열 한 개만 꺼내오기
   const targetCard = datas.filter((data) => {
    return data.id === Number(params.id);
  });
       console.log("targetCard", targetCard);  👉🏻id값을 비교하여 같은 것이 배열로 찍힘

 

📌 문제점:

• queryString을 사용하라는 과제 조건에 맞지 않음
• /detail/123으로 접근해야 하므로 직접 URL을 입력하지 않는 이상 페이지 이동이 어려울 수 있음.

 

QueryString(useSearchParams 사용)

 

📍queryString 란?

 

• URL의 한 부분으로서, 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용
  (구체적으로 더 정렬되고 특정된 형태의 정보를 요청)

이전에 작성한 글  맨 하단에서 '쿼리 파라미터'를 정리한 적이 있어 익숙한 형태이지만, 직접 만들어보는 것은 처음이다.

 

 

📍형태

https://www.example.com/products?sort=popular&color=red

• key=value 형태의 문자열로 표현 (key=value 페어의 개수 제한은 없음)
• ? : 쿼리스트링의 시작 표시 (start of parameters)
• & : key=value 페어 구분 표시 (separator)

 

📍쿼리스트링을 포함해서 Routing 하기

• Link나 navigate로 사용

<Link to="/list?sort=popular" />
 
navigate("/list?sort=popular")

 

 

📍컴포넌트에서 쿼리 스트링 값 가져오기

• 필요 hook : useLocation, useSearchParams
• 쿼리스트링 값 가져오고 쿼리스트링 값 변경 시 리렌더링

 

useLocation hook

• 현재 Location 객체를 리턴
• Location 객체는 현재 위치(URL)에 포함된 여러 정보를 포함
• 각각의 정보를 pathname, search, hash, state, key 등의 프로퍼티로 표현
• search: 쿼리 스트링을 나타내는 프로퍼티로 URL 중 쿼리 스트링에 대한 정보가 문자열 형태로 저장되어 있음
• 단점: 원하는 값만 가져오려면 문자열(?sort=popular)을 자바스크립트를 통해서 Parsing 해야함

import { useLocation } from 'react-router-dom';

  const location = useLocation();
  const queryString = location.search;  //?sort=popularㅍ

 

단점이 있다는 게 뭔가 걸려서.. 다른 방법을 찾아보았다. 

 

 

⭐️useSearchParams hook

• 쿼리 스트링의 값을 이용해서 URLSearchParams 객체를 return
• URLSearchParams 객체: 쿼리 스트링에서 원하는 값만 얻어낼 수 있도록 다양한 메서드를 제공해 주는 객체
• useState와 비슷하게 배열의 형태로 searchParams와 setSearchParams 함수를 리턴

const [searchParams, setSearchParams] = useSearchParams();

• searchParams: URLSearchParams 객체
• setSearchParams 함수: 인자로 객체 또는 문자열을 넣어서 호출하면 현재 URL의 쿼리 스트링을 변경하는 기능을 제공 (컴포넌트 안에서 쿼리 스트링을 변경하고자 할 때 사용)

• searchParams에 정의된 메서드

1. 값을 읽어오는 메서드
   • searchParams.get(key) : 특정한 key의 value를 가져오는 메서드
     원하는 쿼리 스트링의 key를 인자로 넣어서 메서드를 호출하면 해당 key에 부합하는 value가 리턴된다.
   • searchParams.getAll(key) : 특정한 key에 부합하는 value가 두 개 이상일 경우 get 메서드는 제일 먼저 나온 value만 리턴해준다. getAll 메서드는 해당 key에 해당하는 모든 value 값들을 배열의 형태로 리턴해준다.
   • searchParams.toString() : 쿼리 스트링의 값을 그대로 string 형태로 리턴
2. 값을 변경하는 메서드
   searchParams의 값을 변경하더라도 실제 URL의 쿼리 스트링은 변경되지 않는다.
   실제 쿼리 스트링을 변경시키려면 setSearchParams 함수에 searchParams를 인자로 전달하면서 호출해야 한다.
   • searchParams.set(key, value) : 메서드를 호출하면서 인자로 전달한 key 값을 value로 설정하는 메서드
     만약 동일한 key에 여러 value가 이미 존재하고 있었다면, set 메서드를 호출하면서 설정한 값 외에는 삭제된다.
   • searchParams.append(key, value) : 메서드를 호출하면서 인자로 전달한 key 값을 value로 추가하는 메서드
     기존의 값들을 변경하거나 삭제하지 않고 추가하는 방식으로 동작한다.

---

🚨Trouble Shooting

Dynamic을 사용했을 때는 페이지 주소에 직접 /1 을 입력하여서 내가 클릭한 포켓몬 카드의 상세정보(Detail page)로 넘어갔다.

하지만 클릭한 카드의 페이지가 자동으로 넘어가야하며, 이를 QueryString 으로 (/가 아닌 ?사용) 구현해야 한다.

 

Dynamic을 떠올리며 id를 가져오는(get)이 아닌, 입력(set)해야 하는 것 아닌가?  라는 생각이 가득했다.

 

 

👇🏻따라서 set과 get의 로직을 모두 작성해 보았다.

 

[set]

// searchParams.set
  
  const setSortParams = (e) => {
    searchParams.set("id", "1");  ⭐️
    setSearchParams(searchParams);
  };

 

[get]

// searchParams.get

  const getId = searchParams.get("id");

set 로직은 setSearchParams 함수를 통해 적용하지만

get은 포켓몬 [카드를 그려주는 로직]에 직접 적용해야 했다.

<MonCard
      key={data.id}
      
      onClick={(e) => {
          navigate(`/detail?id=`);  ⭐️
        }
      }}
    >

 

⭐️ 표시 부분에서 동일하게 고민했던 부분이
set에서 "1" 자리와 get에서 id= 뒤에 어떻게 동적인 요소 (클릭하는 카드의 id)를 넣어주면 될까? 였다.

 

그러던 중 <MonCard>의 key 값이 눈에 들어왔다.

id= 뒤쪽에 ${data.id}를 입력해주니 작동이 잘 되었다!

 

 

📌[완성 로직]

// Detail.jsx
const [searchParams] = useSearchParams();
const datas = MOCK_DATA;

  const getId = searchParams.get("id"); // queryString에서 id 값 가져오기

  // 배열 한 개만 꺼내오기 (map을 위해 filter 사용)
  const d_TargetCard = datas.filter((data) => {
    return data.id === Number(getId); // type 일치시키기
  });



// PokemonCard.jsx
<MonCard
      key={data.id}
      
      onClick={(e) => {
          navigate(`/detail?id=${data.id}`);
        }
      }}
    >

• setSearchParams 는 사용하지 않기 때문에 지워줌
• return문에서 map을 활용하여 카드를 찍어내기 때문에 filter를 사용
• .get으로 가져온 값은 String이기 때문에 Number() 로 type 일치시킴

---

참고 자료:

https://velog.io/@leah1225/React-%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81Query-String

https://velog.io/@bigwave-cho/React-%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81