제로초 리액트 강의 9.2 params, withRouter, 쿼리스트링, Switch, exact

Route가 너무 많아져서 관리가 힘들 때 params(파라미터)를 사용해서 줄일 수 있음

> 동적 라우트 매칭

하나하나 바꾸기 힘들고 언제 바뀔지 모르는 것에 사용 추천

예: 주소/category/HTML

주소/category/CSS

주소/category/JavaScript

<Route path="/game/:name" component={GameMatcher}></Route>
// :name이 파라미터

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import GameMatcher from './GameMatcher';

const Games = () => {
  return (
      <BrowserRouter>
      <div>
        <Link to="/game/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/game/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/game/lotto-generator">로또추첨기</Link>
        &nbsp;
        <Link to="/game/index">게임매쳐</Link>
      </div>
          <Route path="/game/:name" component={GameMatcher}></Route>
      </BrowserRouter>
  )
}

export default Games;

이렇게 쓸 수 있음

---

// GameMatcher.jsx
...생략

export default class GameMatcher extends Component {
  render() {
    console.log(this.props);
    return (
      <>
      <NumberBaseball />
      <RSP />
      <Lotto />
      </>
    );
  }
}

이렇게 this.props를 찍으면 연결해줘서 history, location등이 나오고 사용할 수 있음

> 어딘가에서 연결해주고 있음

 

history : 페이지 넘나 든 내역 (눈속임을 위해 준비된 메소드)

앞으로 가기 뒤로 가기를 프로그래밍적으로 부를 수 있음

> 실제로 페이지가 바뀌는게 아니기 때문에 페이지 앞뒤로 가기를 브라우저가 제공하는 API가 아니라 리액트 라우터가 제공하는 history를 사용해야함

 

match : 주소창에 나오는 실제주소와 우리가 route에 적어준 주소가 다름 match > params > name 에 실제 주소가 들어있음(동적 주소 라우팅 params에 대한 정보)

> 이걸로 분기처리를 함

 

location : pathname(주소)가 들어있고, search, hash가 들어있음 (주소에 대한 정보)

 

class 컴포넌트에서는 this.props로 접근

function 컴포넌트에서는 (props)자리에서 history, match, location으로 받으면 됨

 

이렇게 조건문으로 사용

// 주소에 따라 다른 게임이 나오도록 하기
import React, { Component } from 'react';
import NumberBaseball from './NumberBaseball';
import RSP from './RSP';
import Lotto from './Lotto';

class GameMatcher extends Component {
  render() {
    if (this.props.match.params.name === 'number-baseball') {
      return (< NumberBaseball />)
    } else if (this.props.match.params.name === 'rock-scissors-paper') {
      return (<RSP />)
    } else if (this.props.match.params.name === 'lotto-generator') {
      return (<Lotto />)
    }
    return (
      <div>
        일치하는 게임이 없습니다.
      </div>
    );
  }
}

export default GameMatcher;

브라우저 history API와 리액트 라우터 history API는 다르지만 의존하고 있음

---

나오지 않는다면 withRouter를 사용해서 연결하고 사용가능

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'; // 불러오고

class GameMatcher extends Component {
  render() {
    console.log(this.props.history, this.props.match);
    return (
      <>
      <NumberBaseball />
      <RSP />
      <Lotto />
      </>
    );
  }
}

export default withRouter(GameMatcher); // 감싸주기

---

쿼리스트링

주소?키=값&키=값

으로 데이터를 전달해 줄 수 있음, 서버도 알아들음

이 주소에 대한 부가적인 데이터

<Link to="/game/number-baseball?query=10&hello=react">숫자야구</Link>

쿼리스트링에 대한 정보는 location의 search에서 확인 할 수 있음

 

리액트 라우터에서는 쿼리스트링 해석하는 걸 지원하지 않음

URLSearchParams를 쓰는게 좋음!

 

예 : 게시판의 5번째 페이지

&page=5

---

부모(Games)의 props를 자식(GameMatcher)에게 넘기기

 

1 component 사용

const Games = () => {
  return (
      <BrowserRouter>
      <div>
        <Link to="/game/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/game/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/game/lotto-generator">로또추첨기</Link>
        &nbsp;
        <Link to="/game/index">게임매쳐</Link>
      </div>
          <Route path="/game/:name" component={() => <GameMatcher props="123" />}></Route>
      </BrowserRouter>
  )
}

 

2 render 사용 추천!

props에 history, location, match가 들어있음

const Games = () => {
  return (
      <BrowserRouter>
      <div>
        <Link to="/game/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/game/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/game/lotto-generator">로또추첨기</Link>
        &nbsp;
        <Link to="/game/index">게임매쳐</Link>
      </div>
          <Route path="/game/:name" render={(props) => <GameMatcher props={props.abc} />}></Route>
      </BrowserRouter>
  )
}

---

Switch

첫번째로 일치하는 것만 렌더링 됨

const Games = () => {
  return (
    <BrowserRouter>
      <div>
        <Link to="/game/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/game/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/game/lotto-generator">로또추첨기</Link>
        &nbsp;
        <Link to="/game/index">게임매쳐</Link>
      </div>
      <Switch>
        <Route path="/game/:name" render={(props) => <GameMatcher {...props} />}></Route> // 이것만 렌더링 됨
        <Route path="/game/number-baseball" render={(props) => <GameMatcher {...props} />}></Route>
        <Route path="/game/number-baseball" render={(props) => <GameMatcher {...props} />}></Route>
        <Route path="/game/number-baseball" render={(props) => <GameMatcher {...props} />}></Route>
        <Route path="/game/number-baseball" render={(props) => <GameMatcher {...props} />}></Route>
      </Switch>
    </BrowserRouter>
  )
}

 

exact

이 주소와 정확하게 일치하는 경우(한글자도 오타 없이)만 렌더링해줌

틀리면 넘어감

const Games = () => {
  return (
    <BrowserRouter>
      <div>
        <Link to="/game/number-baseball">숫자야구</Link>
        &nbsp;
        <Link to="/game/rock-scissors-paper">가위바위보</Link>
        &nbsp;
        <Link to="/game/lotto-generator">로또추첨기</Link>
        &nbsp;
        <Link to="/game/index">게임매쳐</Link>
      </div>
      <Switch>
        <Route exact path="/" render={(props) => <GameMatcher {...props} />}></Route>
        <Route path="/game/:name" render={(props) => <GameMatcher {...props} />}></Route>
      </Switch>
    </BrowserRouter>
  )
}