냅다 즐거워보이는 짤로 시작하기🤗
요즘 혼자서 미니프로젝트를 하고 있는데 여기서 처음 접한 useParams와 useSearchParams를 정리해보겠다(당당)

🔎일단 useParams가 뭐냐묘온~

출처-https://reactrouter.com/en/main/hooks/use-params

useParams후크는 에 의해 일치된 현재 URL에서 동적 매개변수의 키/값 쌍의 객체를 반환 합니다 . 자식 경로는 부모 경로에서 모든 매개변수를 상속합니다.

(말이 조금 어색해보이는건 영어로 소개된걸 냅다 구글 번역기로 바꿨기 때문^^)

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

위의 예시처럼 사용하면 된다고 한다. 어렵Neo..💧💧💦

프로젝트에서 useParams 사용한 코드로 다시 보자🙂

const ProductDetail = () => {
  let { id } = useParams();
  const [product, setProduct] = useState(null);
  const getProductDetail = async () => {
    let url = `http://localhost:5000/products/${id}`;
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
    setProduct(data);
  };

• 일단 위 페이지는 상품 상세페이지이다. 미리 만들어 둔 db.json 에 있는 아이템들의 id값을 읽어와야함

• id는 동적인 값을 읽을 수 있어야해서 템플릿리터럴 형식!

• 공식 문서 코드 예시처럼 useParams를 선언함(let {id} = useParams())

• let url = http://localhost:5000/products/${id};
  => id 값에 해당하는 아이템을 들고옴

  
  

---

🔎useSearchParams란?

=> url에서 쿼리값을 가져오는 함수

useSearchParams후크는 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정하는 데 사용됩니다 . React의 useState후크 useSearchParams 와 마찬가지로 현재 위치의 검색 매개변수와 이를 업데이트하는 데 사용할 수 있는 함수라는 두 가지 값의 배열을 반환합니다 . React의 useStatehook 과 마찬가지로 기능 업데이트 setSearchParams 도 지원합니다. 따라서 업데이트된 버전을 가져와 반환하는 함수를 제공할 수 있습니다.

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

오..어렵Neo..222....💧💦💧💦

난 useSearchParams를 검색창에 검색하는 기능에 사용을했다. 코드를 통해 알아보자 ㄱㄱ

const [productList, setProductList] = useState([]);
const [query, setQuery] = useSearchParams();
const getProducts = async () => {
  let searchQuery = query.get("q") || ""; //=>q로 시작하는 아이템을 가져와서 searchQuery에 넣어줘라. 값이 없으면 빈 스트링을 넣어주겠다
  console.log("쿼리값은?", searchQuery);
  let url = `http://localhost:5000/products?q=${searchQuery}`;
  let response = await fetch(url);
  let data = await response.json();
  setProductList(data);
};

• const [query, setQuery] = useSearchParams();
  => 먼저 useSearchParams를 선언한다.
• let searchQuery = query.get("q") || "";
  => q로 시작하는 아이템을 가져와서 searchQuery에 넣어줘라. 값이 없으면 빈 스트링을 넣어주겠다.
• let url = http://localhost:5000/products?q=${searchQuery};

✨검색창(input)에 '와이드' 라고 입력하면 url 쿼리 부분이 와이드로 바뀐것을 확인할 수 있다.✨

• 이제 url이 변경되는 것은 확인을 했으니 화면에 보여줘야함.
• useEffect를 사용해서 query값이 바뀔 때마다 화면에 바뀐 값을 보여준다

useEffect(() => {
  getProducts();
}, [query]); //query값이 바뀔때마다 화면에 보여줘!

---