[Router] BrowserRoure, Render props, 동적 라우트, Switch, queryString

리액트 앱은 기본 브라우저의 동작과 다르기 때문에,
페이지 넘나든 내역도 기본 브라우저가 제공하는 내용과 다른, react router로 써줘야 함. 

 

 

•  동적라우트 사용 예시
  /game/:name
  /category/:name
  이렇게 카테고리 안에 라우트가 있을 때. 일일이 라우트를 만들어주기 힘드니까, 언제 바뀔지도 모르고. =>  동적 라우트로

 

•  Switch
  그 켜고 끄는 스위치가 맞다. 
  첫번째 일치하는 것만 렌더링 해준다 나머지 일치하는것들은 렌더링 x
  다수의 라우터 -> 동시에 여러개 뜨는거 막음.
  주의! switch를 쓰면 상위주소(/)도 일치하는걸로 쳐버려서 exact path를 해줘야된다.

 

• queryString 사용 예시
  /category/JavaScript?page=3.. 4... 5...
  부가정보. 카테고리 안에서 페이지 이동. 새로고침 해도 똑같이 3번째 페이지에 띄워줄 수 있다. 안하면 매번 첫페이지만(/category/JavaScript) 나옴.
  리액트 라우터에서는 queryString해석하는 것을 제공하지 않아서 urlSearchParams로 해석하기.
  #샵 뒤에는 서버에 안보임 ..!

 

• 라우터 관련 props: 
  - history: 페이지 넘나든 내역. 메소드: go, goBack, goForward, push, replace (눈속임을 위한 메소드들.)
  - location: url 뒷부분 queryString 에서 데이터를 가져올 수 있음. location.search. urlSearchParams으로 해석
  queryString: 쿼리스트링 값은 서버에서도 알아챔. 서버로 데이터를 넘기는 쉬운 방법. urlSearchParams로 해독
  - match: path: "/game/:name" params: {name: "index"} 파람 내용 보기 (동적라우팅)

 

 

코드 완성분 + comments 

Game.jsx

 

 

GameMatcher.jsx

 

Game.jsx

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

const Games = () => {
  return (
    <BrowserRouter>
      {/*레이아웃 부분 (Route 바깥 - 제로초 홈페이지 보면 ㄷ자로 안바뀌는 곳)*/}
      <div>
        <Link to="/game/res_check?query=10&key=value&bye=react">ResponseCheck</Link>
        &nbsp;
        <Link to="/game/lotto">Lotto</Link>
        &nbsp;
        <Link to="/game/index">게임매쳐</Link>
      </div>

      {/*링크 클릭시 바뀌는 부분 */}
      <div>
        {/* 동적 라우팅.  :name param으로 압축하기 */}
        {/*render props. Route안에서 프롭 넘겨주기.*/}
        <Switch>
            <Route exact path="/" render={props => <GameMatcher {...props} />} />
            <Route path="/game/:name" render={props => <GameMatcher {...props} />} />
        </Switch>

      </div>
    </BrowserRouter>
  );
};

export default Games;

{
  /* 동적라우트 매칭 예시보기: https://youtu.be/gJlz5HUoJtY?list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&t=327*/
}

 

 

GameMatcher.jsx

import React, { Component } from 'react';
import Lotto from './LottoHooks';
import ResponseCheck from './ResponseCheckHooks';

const GameMatcher = props => {
  console.log(props);
  const urlSearchParams = new URLSearchParams(
    props.location.search.slice(1) // 맨 앞에 ? 떼주고
  ); // 빈 객체가 아님!
  console.log(urlSearchParams.get('bye'));

  if (props.match.params.name === 'lotto') {
    return <Lotto />;
  } else if (props.match.params.name === 'res_check') {
    return <ResponseCheck />;
  }
  return <>일치하는 겜 없음</>;
};

export default GameMatcher;

 

 

 

 

 

 

 

 

 

 

 

 

실무에서 많이 쓰는 리액트 라우터 react router

 

공식문서

 

https://reacttraining.com/react-router/web/guides/quick-start

React Router: Declarative Routing for React

 

 

 

 

렌더 프롭 render prop

https://react-etc.vlpt.us/04.render-prop.html

Render Prop · GitBook

Render Prop 을 사용함으로서 최고 이점은 컴포넌트가 가지고 있는 기능 - LifeCycle API, JSX 등을 온전히 누릴 수 있습니다.