Written by Parkdev
on January 20, 2024

React Url-parameter 사용하기

Router을 사용하면서 상품 상세와같은 수백 수천 수만개의 상품 상세의 url을 일일히 직접 작성하는것은 무의미한 시간낭비를 발생시킨다.

반복문으로 url을 직접 설정할 수도 있겠지만

조금더 쉬운방법으로 React Router는 URL-parameter 기능을 제공한다.

사용방법

기존 Route 양식에 ‘:id’를 쓰면 간편하게 적용이가능하다.

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

이후 연결된 컴포넌트에서 (여기서는 Detail) useParams()를 사용하여 파라미터 정보를 가지고 데이터를 연결시키면된다.

  // useParams(): 파라미터 정보를 가지고 있다.;
  let {id} = useParams();
  //존재하지 않는 파라미터를 보여주면 if문으로 다른걸 보여주면된다.
...
shoes ={shoes[id]}

활용

파라미터와 일반 상세 url은 조합이가능하다.

ex) /detaill/:id/deeetailll/:num

존재하지 않는 파라미터에 접근시에는 if문으로 예외처리를 해주면된다.

참고

파라미터를 이용하여 상품을 표시할때 상세페이지에서 파라미터로 data를 직접적으로 조회하면 문제가생길 수 있다.

예를들면 상품 목록페이지에서 상품의 목록 순서가 바뀌었을때, 상품id와 parameter의 id가 달라져 의도한 결과와 다른 결과를 낼 수 있다.

때문에 이를 매칭해주려면 받은 파라미터와 실제 상품 id를 연결해주는 작업이 필요하다.

이때 사용하는 함수가 JS 의 find함수이다.

.find()함수는 () 안의 함수 조건에 해당하는 첫번째 값을 반환해 주는 함수이다.

만약 찾지 못하면 undefind를 배출한다.

cf)이와 유사한 기능으로 filter()이 존재한다. filter()은 조건에 해당하는 값 전부를 Array로 출력하며 조건에 해당하는 값이 없을때는 빈 Array를 출력한다.

.find()코드를 사용한 예시는 다음과같다.

let x = [{ id: 1, title:"Hello" },{ id: 2, title:"World"}
let id = 1;
let result = Array.find((x)=>{
 return x.id == id
})

Console.log(result)
// {id: 1, title:"Hello"}

← → Top