TIL032 | Routing

1. Routing 이란

라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미한다.
React는 기본적으로 라우팅 시스템을 갖추고 있지 않으므로, react-router-dom 과 같은 부가적인 라이브러리를 설치해서 라우팅 기능을 추가할 수 있다.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

ReactDOM.render(<Routes />, document.getElementById("root"));

// Routes.js
import React, { Component } from "react";
import { Router, Route, Switch } from "react-router-dom";
import App from "";
import Users from "";
import Products from "";

const Routes = () => {
  return (
    <Router>
      <Nav />
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/users" component={Users} />
        <Route exact path="/products" component={Products} />
      </Switch>
      <Footer />
    </Router>
  );
};

---

2. Path Parameter

라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적 라우팅 (Dynamic Routing) 이라고 한다.
그리고 이를 구현하기 위한 방법 중 하나가 Path Parameter 이다.

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

위의 2, 45, 125 와 같이, 라우트 경로 끝에 들어가는 각기 다른 id 값들을 저장하는 매개 변수가 바로 Path Parameter 이다.

---

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

Path Parameter 는 Routes.js 에서 :id 를 붙여서 사용할 수 있다.

---

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

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

위의 Router 를 통해 연결된 productDetail 컴포넌트에서 id 를 this.props.match.params.id 로 받아서 사용할 수 있다. 이것이 가능한 이유는 Path Parameter 로 명시해둔 값은 match 객체에 담기기 때문이다.

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

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

---

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

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

---

만약 Routes.js 에서 직접 연결되어 있지 않은 컴포넌트에서 history, location, match 3가지 객체를 사용하고 싶다면 withRouter 함수를 사용할 수 있다. 인자로 컴포넌트를 받고, 해당 컴포넌트에 3가지 객체를 추가한 컴포넌트를 반환한다.

import { withRouter } from 'react-router-dom';

class Payment extends React.Component {
  render() {
    console.log(this.props); // { history: {}, location:{}, match:{}, ... }
    return(
      ...
    )
  }
}

export default withRouter(Payment);

---

3. Query Parameter

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우, 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 하는데 이런 경우 Query Parameter(or Query String, 쿼리 스트링) 를 사용할 수 있다.

프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.

예를 들어, localhost:8000/product?limit=10&offset=5 라는 주소가 있다고 한다면, API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 바로 쿼리스트링이다.

?limit=10&offset=5 의 경우, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청으로 해석된다.

• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)

---

// 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 (
      ...
    )
  }
}

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

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

url 에서 쿼리 스트링에 대한 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있다.