TIL. 36 React - Dynamic Routing

💡 Dynamic Routing(동적 라우팅)이란?

• Route 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것 을 동적 라우팅이라 한다.

• Path Parameter 라우트 경로 끝에 들어가는 id 값들을 저장하는 매개 변수이며, 딱 한가지 리소스만 타겟팅 할 때 사용된다.(ex: 제품 상세 페이지)

• Query String Key, Value 형태이며 여러가지 리소스를 타겟팅 할 때 사용된다.(ex: 조건에 충족하는 데이터 요청, Filtering, Pagination)

<Router>
  <Switch>
    <Route exact path='/product/:id' component={productDetail} />
  </Switch>
</Router>

// :는 변수로 쓰겠다라는 의미이며, Path Parameter가 온다는 것을 알린다.
// id는 해당되는 Path Parameter 의 이름이며, 임의의 이름을 지정할 수 있다.

• history 페이지의 기록에 대한 정보를 담고 있다. 자주 사용하는 메소드 중 하나로 history.push()는 원하는 컴포넌트로의 이동을 도와준다.

• location 현재 보고있는 브라우저의 위치에 대한 정보가 담겨 있고 제어할 수 있는 객체이다.

• match url, path(path parameter), params, isExact 등 라우터와 url의 매칭에 대한 정보를 담고 있다.

  • isExact boolean 값을 가지며 전체 url이 일치하면 true이다.
  • path string 형태이며 Route에 정의된 경로를 담고 있다.
  • url 클라이언트로부터 요청 받은 경로를 가지고 있다.
  • params 경로에 전달된 parameter 값을 가진 객체이다.

• Query string id라는 변수에 값을 담아 백엔드에 전달할 수 있다. 어떤 data의 위치를 특정해야할 경우와 filtering 해야할 경우 주로 사용한다.

  • /product?id=1
  • 위의 Query string은 아이디가 1인 상품을 가져온다.

• offSet 데이터의 시작 위치(index)를 특정할 수 있다.

• limit 한 페이지에 보여줄 데이터의 수를 정할 수 있다.

  • offset + LIMIT로 시작 위치와 보여줄 데이터의 수를 활용해 무한 스크롤 구현이 가능하다.

💡 프로젝트 적용

• 프로젝트를 진행하는 중 메인 페이지에서 상품을 클릭했을 때, 해당되는 상품의 상세 페이지를 보여줘야하는 상황이 있었다. 이를 해결하기 위해 동적 라우팅이 필요했으며, 아래는 그 부분의 코드이다.
  
• 먼저 Routes.js로 가서 메인 페이지에서 클릭하는 해당 상품을 캐치할 수 있도록 구분할 수 있는 고유값(id)를 data상의 key 값과 동일한 productId라는 변수를 할당했다.

• 메인 페이지의 상품에 대한 컴포넌트에서는 먼저 상품을 클릭했을 때(onClick), 해당 상품에 대한 상세페이지로 넘어갈 수 있도록 goToDetail이라는 함수를 만들어 클릭한 상품에 대한 productId 값을 history.push() 형태로 넘겨 이동할 수 있도록 설정한다.

정리

동적 라우팅은 개인적으로 흥미로운 내용이었다.
코딩을 하나씩 배워갈 때마다 쌓이는 지식들이, 처음에는 이해가 잘 되지 않다가 또 다른 코딩 지식들을 배울 때 도미노처럼 이해가 되버리는 상황이 있다.

동적 라우팅이 나에겐 그런 내용이었고, 아직은 작은 상자안에서 하는 공부지만 그 상자를 점점 키우고 나중에는 그 밖으로 나가는 상상을 해본다.