TIL no.36 [Dynamic Routing]

손병진·2020년 9월 20일

React TIL dynamicrouting

wecode

목록 보기

21/27

동적 라우팅 개념

언제 필요한가

상품목록 페이지에서 상품상세 페이지로 넘어갈때
혹은, 메뉴에서 해당 제품 카테고리로 넘어갈때 등등
새로운 url 주소로 연결되게끔 만드는 개념이다.

무엇이 필요하고 사용되는가

Routes.js
데이터(API): 어떤 제품에 해당하는 key 값이 필요하다.
함수: 대부분의 경우 onClick 일어났을 경우에 실행되는 함수이다.
post: 특정값을 서버로 보내주어야 그에 해당하는 데이터(url) 받을 수 있다.

라우팅에 활용되는 3가지 props

history

경로를 이동할 때 활용한다
login 되었을시 main 페이지로 넘어갈때 url 뒷부분을 추가해줄 수 있다
(westagram 프로젝트에서 활용한 적이 있다)

import React, { Component } from "react";
import {withRouter} from "react-router-dom";// 중괄호 필수!

export class Login extends Component{
  constructor(){
    super();
  }

goToMain = () =>{
  this.props.history.push("/main");
  // histoty 활용하여 url 수정할 수 있다.
  // 그리고 해당 url로 이동한다.
}

render(){
  return(
    <button
    className="Login"
    onClick={this.goToMain}
    >메인페이지로 넘어가기
    </button>
  );
 }
}

export default withRouter(Login)

짚고 넘어가자!
withRouter VS <Link>

withRouter: 라우터가 쓰이면 history, location, match 쓸 수 있다.
이 3가지 props가 필요하거나 어떤 함수를 거쳐야하는 컴포넌트에서 활용된다.
예를 들면, 제품 상세 페이지에서는 url 활용해서 데이터를 받아와야하기 때문에 사용된다

<Link>: 바로 특정 페이지로 넘어갈 때 사용된다.
예를 들면, 제품 리스트에서 상세 페이지로 넘어갈때는 제품 id를 가지고 바로 넘어간다.
(해당 url 정보를 활용하지 않는다.)

<a> VS <Link>

<a>: 다른 사이트로 이동하는 경우

<Link>: 프로젝트 내에 페이지를 전환하는 경우

location

위에서 나온 /main 같은 주소 정보를 가져올때 활용하는 props
http://localhost:3000/productList 에서
console.log(this.props.location) 했을때 출력되는 값 : 현재 경로에 대한 정보

{pathname: "/productList", search: "", hash: "", state: undefined}
hash: ""
pathname: "/productList"
search: ""
state: undefined

먼저 Url 쿼리를 팀원간의 소통으로 설정하고 그 값들 중 일부를 이용하여
백엔드가 필요한 Url 주소를 만들어서 fetch 메소드에 삽입한다.
'카테고리별 리스트' 에 진입해서 데이터를 불러올 때
현재 페이지의 url에서 어떤 값을 fetch 인자에 포함시켜 호출한게 된다.
this.props.location.search 는 위의 예시에서는 아무것도 없지만
원래 /productList 뒤에 붙어있는 값을 가져온다.
그리고 그걸 활용하여 fetch 인자를 구성하고 데이터를 호출한다.

match

활용할 수 있는 조건

// Routes.js - productDetailPage 라우트 설정
<Route exact path="/product_detail/:id" commponent={CompanyDetailPage} />

// productList.js - List 페이지에서 상품 클릭 시 상세 페이지 이동 경로 설정
<Link to={`/product_detail/${this.props.jobId}`}> ... </Link>

// 상세 페이지 진입 시 API 호출 주소 
fetch(`http://10.58.7.182:8001/job/recruitment/${this.props.match.params.id}`)

앞서 Routes.js 파일에 위치한 /product_detail/:id 정보를 지니고 있다.
이를 활용하여 fetch 주소를 구성하여 상제 제품 데이터를 호출한다.
componentDidUpdate

componentDidUpdate(prevProps) {
    if (prevProps.match.params.id !== this.props.match.params.id) {
      fetch(
        `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
      )
        .then((res) => res.json())
        .then((res) => this.setState({ data: res }));
    }
  }