browser history API

1. spa를 구현하기 위한 2가지 기능

  1) js에서 브라우저로 페이지 전환 요청을 보내는데, 서버로 요청을 보내지 않아야 함.

  2) 브라우저의 뒤로가기 버튼 처럼 사용자의 페이지 전환 요청을 js에서 처리할 수 있다. 이때도 서버로 요청을 보내지 않아야 한다.

  이런 기능을 만족하는 api는 pushState, replaceState, popstate이벤트이다.

  우선 브라우저 히스토리에는 state값을 저장 할 수 있는 stack이 존재한다.

import React, { Component } from 'react';
// import Box from './box4/Box4';
// import './App.css';

class App extends Component {

  componentDidMount(){
    window.onpopstate = event => {
      console.log(`location: ${document.location}, state:${event.state}`);
    };
  }

  render() {
    return (
      <div className="App">
       <button onClick={()=>window.history.replaceState('v1','','/page1')}>page1</button>
       <button onClick={()=>window.history.pushState('v2','','/page2')}>page2</button>
      </div>
    );
  }
}

export default App;

 위 내용입력 후 실행시켜보고 버튼을 클릭해보면 주소값이 바뀌는 것을 알 수 있다. 이때 서버요청도 안되고 화면도 깜빡이지 않는다.

 그리고 브라우저 뒤로가기 버튼을 클릭할때 로그를 보면, stack에 쌓인 값이 null이 될때까지 돌아간다.

pushState는 stack에 값을 저장하고, replaceState는 저장하지 않는다.

우리가 일반적으로 사용하는 react-router-dom 라이브러리의 내부는 위와 같은 구조로 이루어져 있다.

2. react-router-dom

<BrowserRouter> : react-router-dom 라이브러리를 사용하기 위해서는 이 태그로 항상 감싸야한다.

<Link to="/"> : 이 태그는 버튼으로 클릭시 이동하는 주소값을 넣는다.

<Route> : 실제로 주소값에 따라 바뀌는 화면을 보여준다.

<Route exact path ="/" component={Home} />에서 exact는 path값하고 정확하게 일치해야 이동가능하다. 

  <Route path="/photo" component={Home}/>
  <Route path="/photo" component={Photo}/>

 주소값이 일치할 경우 컴포넌트 두개 전부 랜더링 한다.

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

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div style={{ padding : 20, border : '5px solid gray'}}>
          <Link to='/'>home</Link>
          <br/>
          <Link to='/photo'>photo</Link>
          <br/>
          <Link to='/rooms'>방소개</Link>
          <br/>
          <Route exact path="/" component={Home}/>
          <Route exact path="/photo" component={Photo}/>
          <Route exact path="/rooms" component={Rooms}/>
        </div>
      </BrowserRouter>
    );
  }
}

function Home({match}){
  console.log(match);
  return <h2>이곳은 홈페이지 입니다.</h2>
}
function Photo({match}){
  return <h2>이곳은 사진을 감상하세요.</h2>
}
export default App;