React 스터디 9주차

1. react-router

react router를 사용하려면 패키지 설치가 필요하다.

npm i react-router
npm i react-router-dom

import React from "react";
import { BrowserRouter, Route } from 'react-router-dom';
import MineSweeper from "./minesweeper";

const Games = () => {
    return (
        <BrowserRouter>
            <div>
                <Route path="minesweeper" component={MineSweeper} />
            </div>     
        </BrowserRouter>
    );
};

react router는 실제로 여러 개의 페이지가 있는 것이 아니라, 여러 개 있는 척을 하는 것이다! router가 가상으로 만들어주는 페이지에 이동하는 방식이다.

2. Link

react router에서는 <a> 태그 대신 <Link>를 사용한다.

const Games = () => {
    return (
        <div>
            <BrowserRouter>
                <div>
                    <Link to="/minesweeper" />
                </div>

                <div>
                    <Route path="minesweeper" component={MineSweeper} />
                </div>     
            </BrowserRouter>
        </div>
    );
};

3. BrowserRouter과 HashRouter

• BrowserRouter : 검색엔진이 읽을 수 있다. 주로 동적인 웹 페이지를 구현할 때 사용되며, 새로고침을 했을 때 페이지의 경로를 찾지 못하는 경우가 생길 수 있다.
• HashRouter : 검색엔진이 읽을 수 없다. URL에 '#'이 들어가는 방식이며, 새로고침을 해도 URL 싱크가 유지된다.

4. location, match, history

• location: 현재 주소에 대한 정보를 가짐
• match: 동적 주소 라우팅을 할 때 params(/game/:name)에 대한 정보를 가짐

if(this.props.match.params.name === 'minesweeper') {
    <MineSweeper />
}

• history: 브라우저의 URL을 바꾸며, 라우터 이동 시에 사용