useParams 가 뭔데? 대체 뭔데!

useParams는 리액트 훅중 하나이다.

 

이건 언제쓰냐고?

 

유저가 URL파라미터에 입력한걸 가져올때 사용된다.

 

App.js안에 있는 :id (url파라미터) 

 <Route path="/detail/:id" element={<Detail product={product} />} />

 

이걸 가져오기 위해서 useParams를 사용해준다

 let { id } = useParams();

  let 찾은상품 = props.product.find((x) => x.id === id);

프롭스를 해서 find로 찾아주고 x.id 현재 html에있는 : id값과 데이터(product) 안에있는 id값이 같으면이라는 뜻

 

이걸 이렇게 선언해주고

 

<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}</p>

이렇게 html에 작성해준다.

 

결국엔 몇수십개의 페이지를 만들때 사용하면 좋다.

또한 id 값을 비교하고 오류나는것을 방지해준다.