Path Parameter & Query Parameter

경로에 따라 각기 다른 화면을 보여주기

• route + -ing : 경로(route)를 찾아가는 행위
• 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.
• html을 새롭게 받아오는 것이 아니라 어떠한 경로에 접근하면 컴포넌트가 화면에 보여지는것

동적라우팅

• url 을 살펴보면 url 마지막에 특정 id 값이 들어가고(/32692, /53424), 해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지는 것을 볼 수 있다. id 값에 따라 무수히 많은 url 이 나타날 것이고, 각각의 모든 url 에 대해 미리 경로의 형태와 갯수를 결정할 수 없게 된다.
• 즉, URL에 들어갈 id를 변수처럼 다뤄야 할 필요성이 생긴 것
• 이처럼 정적이지 않은, 동적일 수 있는 경로에 대하여 라우팅을 하는 것을 동적 라우팅(Dynamic Routing)이라고 부른다.

 

쿼리파라미터 , 패스파라미터 사용방법

 

패스파라미터는 원하는 조건의 데이터들 혹은 하나의 데이터에 대한 정보를 받아올 때 적절하다.

쿼리파라미터는 filtering, sorting, searching에 적절하다.

 

Path Parameter

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125

위 예시에서 라우트 경로 끝에 들어가는 각기 다른 id 값들이 들어갑니다. 2, 45, 125 . url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 한다.

Path Parameter 는 Router 컴포넌트에서 다음과 같이 정의된다.

<BrowserRouter>
  <Routes>
    <Route path='/product/:id' element={<ProductDetail />} />
  </Routes>
</BrowserRouter>

• : 는 Path Parameter 가 올 것임을 의미
• id 는 해당 Path Parameter 의 이름을 의미, 변수 명을 짓듯이, 임의의 이름을 지정해줄 수 있다.