Advanced Router

1. 동적 라우팅(Dynamic Routing) : 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것(ex. 상품 목록 페이지에서 상품 상세 페이지로 이동할 때 활용되는 기능)

2. 사용자 브라우저에 입력되는 URL 주소 vs. 백엔드에 요청하는 API 주소 구분 필요

3. 페이지네이션 : 백엔드와 함께 구현하는 기능

1. Routing

(1) 경로에 따라 각기 다른 화면 보여주기

• 라우팅(routing) : 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것

(2) SPA (Single Page Application)

• SPA : 사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술

• 사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림

• SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공

  • 페이지 전체를 새로고침 하지 않기 때문

2. 정적 라우팅, 동적 라우팅

(1) 정적 라우팅(Static Routing)

Routes.js : React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정(switch)하는 역할 (화면 바꿔 끼우기)

• 지금까지 해온 라우팅 방법으로는 Routes.js 를 통해 완전히 정해진 경우(정적, static)에 대해서만 경로를 표현 할 수 있었음

(2) 동적 라우팅(Dynamic Routing)

• URL에 들어갈 id를 변수처럼 다뤄야 할 필요성이 생김
• 동적인 경로를 처리할 수 있는 방법으로 Path Parameter 와 Query Parameter 가 있음

• URL 마지막에 특정 id 값이 들어감

  • 해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지게 됨

• id 값에 따라 무수히 많은 URL 이 나타날 것이고, 각각의 모든 URL 에 대해 미리 경로의 형태와 갯수를 결정할 수 없게 됨

1) Path Parameter

"/users/:id" => <Users /> // this.props.match.params.id

  ex) https://rrbsb.csb.app/netflix
      https://rrbsb.csb.app/yahoo
      https://rrbsb.csb.app/modus-create

2) Query Parameter

"/search?keyword=something" : <Search /> // this.props.location.search

  ex) https://mfh8p.csb.app/account?name=netflix
      https://mfh8p.csb.app/account?name=yahoo
      https://mfh8p.csb.app/account?name=modus-create

3. Dynamic Routing & Path Parameter

(1) 동적 라우팅 (Dynamic Routing)

• 보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성됨

(2) Path Parameter

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

• 라우트 경로 끝에 들어가는 각기 다른 id 값들(2, 45, 125)을 저장하는 매개 변수를 Path Parameter 라고 함

• Path Parameter 는 Routes 컴포넌트에서 다음과 같이 정의됨

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

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

(3) history, match, location 객체

• React Router 에서 제공하는 history, match, location 객체를 사용하여 위의 id 값을 가져올 수 있음

• Routes.js 의 Route 컴포넌트의 component 프로퍼티에 직접 연결되어 있는 하위 컴포넌트는 history, location, match 3가지 객체를 props 를 통해 제공 받음

// Routes.js
<Route exact path='/product/detail/:id' component={ProductDetail} />

// ProductDetail.js
render() {
  console.log(this.props) // { history: {}, location: {}, match: {}, ... }
  return (
    ...
  );	
}

• 위의 예제에서, ProductDetail 컴포넌트는 Route 컴포넌트를 통해 3가지 객체를 제공 받음

• history 객체 : 페이지 이동을 위한 여러 메서드들을 담고 있음 (ex. push)
• location 객체 : 현재 URL 경로에 관한 정보를 담음
• match 객체 : Path Parameter 에 관한 정보를 담음

(4) this.props.match.params.id

• match 객체를 이용하여 URL 에 담겨있는 id 값을 가져올 수 있음

• Path Parameter 로 명시해둔 값은 match 객체에 담기기 때문

// ProductDetail.js
// current url -> localhost:3000/product/1

class ProductDetail extends React.Component {
  ...
  render() {
    console.log(this.props.match.params.id) // 1
    return (
      ...
    );	
  }
}

• 따라서 componentDidMount 메서드에서 해당 id 값을 서버에 요청을 보내는 것을 통해 원하는 정보를 받아올 수 있음

componentDidMount() {
  fetch(`${API}/${this.props.match.params.id}`)
  .then(res => res.json())
  .then(res => ...);

(5) 동적 라우팅을 구현 로직 정리

• 리스트 페이지의 개별 상품을 클릭
  → this.props.history.push("/product/1") 로 상세 페이지로 이동

• 상세 페이지로 이동하면 URL은 "http://localhost:3000/product/1" 과 같이 변경되어 있음

• 페이지에 필요한 데이터를 CDM 에서 fetching 함

  • 필요한 id는 URL에 존재하므로 this.props.match.params.id 에서 가져올 수 있음
  • 해당 id를 가지고 백엔드에서 만들어준 API를 호출

componentDidMount() {
  const id = this.props.match.params.id
  fetch(`http://123.456.123.123:8000/products/${id}`) // 1
    .then(res => res.json())
    .then(res => this.setState({ data: res })) 
}

• 서버에서 가져온 데이터(res)를 컴포넌트의 state 객체에 저장
• state 객체에 담긴 데이터로 컴포넌트 UI 를 render

4. Pagination & Query Parameter

(1) Pagination

• 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용

• 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 함

• 프론트엔드에서 현재의 위치(Offset)와 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달

• 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현

(2) Query Parameter

쿼리 스트링(Query String)이란? : 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻함

• 이 과정에서 Query Parameter(혹은, Query String)를 사용하게 됨

// API 주소

localhost:8000/product?limit=10&offset=5

• 쿼리스트링 : ? 로 시작하는 텍스트
• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)
• parameter=value : 필요한 파라미터의 값을 적음
• 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있음

(3) this.props.location.search

• Path Parameter 에 대한 정보는 match 객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는 location 객체 안에 담겨있음

// current url -> localhost:3000/products?offset=10&limit=10

class ProductList extends React.Component {
  ...
  render() {
    console.log(this.props.location.search) // ?offset=10&limit=10
    return (
      ...				
    )
  }
}

• 따라서 URL 에서 쿼리 스트링에 대한 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있음

fetch(`${API}/${this.props.location.search}`)
  .then(res => res.json())
  .then(res => ...)

5. 동적 라우팅 vs. 페이지네이션

(1) 동적 라우팅

1. 리스트 페이지에서 카드를 클릭
2. URL 이동. 이때, 카드의 고유한 id 값이 URL 에 포함됨
3. 이동한 페이지에서, URL 에 담겨있는 id 값을 match 객체를 이용하여 가져옴
4. 가져온 id 값을 이용하여 백엔드에 데이터를 요청

(2) 페이지네이션

1. 리스트 페이지에서 버튼을 클릭
2. URL 이동. 이때 URL 에는 각 버튼에 해당하는 쿼리스트링이 포함됨
3. 이동한 페이지에서, URL 에 담겨있는 쿼리스트링을 location 객체를 이용하여 가져옴
4. 가져온 쿼리스트링을 이용하여 백엔드에 데이터를 요청

<출처> wecode(코딩 부트캠프) 세션