동물 정보 사이트 기술 블로그 작성하기 2

• 상세 페이지로 이동 시 특정 id 값에 대한 데이터를 받아오는 방법
(useParams의 개념을 포함하여 작성해 주세요.)

 

상세페이지 특정 id 값에 대한 데이터 받아오기

 

 

상세페이지의 route

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

 

 

detail.jsx

 

react-router-dom에서 useParams 훅을 불러오고,

../assets/data/data 경로(data.js)에서 data를 불러온다.

 

params?

url의 경로를 동적으로 조작

 

useParams()라는 React Router 훅을 사용하여

현재 페이지의 동적 url 파라미터 값을 추출하여

params 객체로 반환한다.

=> /detail/1이라는 url을 { id: "1" } params 객체로 반환

 

 

animalData는

data 배열에서 id가 현재 url 파라미터의 id와 일치하는 항목을 반환시킨다.

=>find는 주어진 조건에 맞는 첫 번째 요소를 반환한다.

 

data에서 받아오는 id는 숫자인데

url로 받아오는 id는 문자열이다.

 

=> params.id를 숫자(Number)로 바꿔준다.

=> Number(params.id)