[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (2) 부제 :: Broswer History API를 사용해서 페이지 라우팅 하기

이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다.

이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다.

해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다.

1. 1부 리액트가 페이지를 라우팅 하는 방법
2. 2부 Broswer History API를 사용해서 페이지 라우팅 하기
3. 3부 react-router-dom을 이용해서 페이지 라우팅 하기

---

우리는 저번 시간에 리액트가 페이지에서 어떤 식으로 라우팅 되길 원하는지? 에 대해서 잠깐 알아보았다.

 

그리고 SPA방식으로 페이지를 구성하는 방법에 대해서 잠깐 실험을 해보았는데, 이번 시간에는 브라우저 히스토리 API에 대해서 더 깊게 알아보려고 한다.

 

브라우저 히스토리 API에 대해서는 더 자세히 알고싶은 사람은 MDN Docs에서 확인해보는 것도 좋은 방법이다.

브라우저 히스토리 API

SPA를 구성하려면 중요한 개념이 있다.

• 서버로의 요청이 없이 페이지 전환과 뒤로가기가 가능해야 한다.

이런 개념을 적용하기 위해서 간단하게 History Api에 대해서 알아야 하는데 모든 것을 다 알 필요는 없다. 딱 3가지만 알아보자.

1. pushstate
2. replacestate
3. popstate

pushstate() 함수

pushstate()함수는 다음과 같은 구조를 갖는다

 

pushstate(state, title, url)

이는 브라우저가 세션 스태이트를 스택에 추가한다고 하는데, 쉽게 설명하자면 해당 url로 이동할 수 있게 해주는 역할을 한다.

 

서버의 요청 없이

replacestate() 함수

replacestate() 함수는 다음과 같은 구조를 갖는다.

replacestate(state, title, url)

 

이는 브라우저가 현재 히스토리를 해당 url로 저장하고 직접 이동할 수 있게 한다.

 

서버의 요청 없이

popstate() 함수

popstate() 함수는 빠른 설명을 위해 MDN의 문서 일부를 캡쳐하였다.

MDN 문서

---

이제 본격적으로 페이지를 구성해보자.

React와 Broswer Histroy APi로 SPA 구성하기

브라우저 히스토리는 지난 시간에도 잠깐 했지만 이번에는 조금 더 다양한 컨텐츠를 추가시켜서 구성해보자.

 

결과적으로는 우린 이런 페이지를 만들 것이다.

페이지 홈은 localhost:3000 이고 각각의 버튼을 클릭하면 다음과 같은 화면이 등장할 것이다.

랭킹을 클릭하면 사용자 랭킹이 나오고 사용자를 클릭하면 사용자 정보가 나오게 할 것이다. 어떻게? 서버의 요청 없이

소스 코드

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

class App extends Component {

  state = {
    pageName : '', // 현재 페이지를 상태 값으로 관리
  };

  componentDidMount(){
    window.onpopstate = event => { // popstate 가 발생하면 페이지를 전환
      this.onChangePage(event.state);
    }
  }

  onChangePage = pageName => { // 버튼이 클릭되면 pageName이라는 상태값을 바꿔주기 위한 메서드
    this.setState({ pageName });
  };

  onLankingClick = () => { // 랭킹 페이지 버튼 클릭
    const pageName = 'lanking';
    window.history.pushState(pageName, '', '/lanking');
    this.onChangePage(pageName);
  }

  onUserClick = () => { // 사용자 페이지 버튼 클릭
    const pageName = 'user';
    window.history.pushState(pageName, '', '/user');
    this.onChangePage(pageName);
  }

  render() {
    const { pageName } = this.state;
    return (
      <div>
        <button className="lanking" onClick={this.onLankingClick}>Lanking</button>
        <button className="user" onClick={this.onUserClick}>User</button>
        {!pageName && <Home />}
        {pageName === 'lanking' && <Lanking />}
        {pageName === 'user' && <User />}
      </div>
    );
  }
}

function Home() {
  return <h2>메인 페이지 입니다. 버튼을 클릭하세요</h2>;
}

function Lanking(){ 
  return (
    <div>
        <h2>랭킹 페이지 입니다.</h2>

        <br></br>
        <h4>경험치 랭킹</h4>
        <br></br>
        <ol>
          <li>사용자 3 : 44012</li>
          <li>사용자 1 : 42019</li>
          <li>사용자 5 : 20919</li>
          <li>사용자 4 : 9918</li>
        </ol>
    </div>
  );
}

function User() {
  return (
    <div>
      <h2>사용자 정보 페이지 입니다.</h2><br></br>
      <div>
        <h4>사용자 1</h4><br></br>
        사용자 1 입니다.
      </div>
      <div>
        <h4>사용자 2</h4><br></br>
        사용자 2 입니다.
      </div>
      <div>
        <h4>사용자 3</h4><br></br>
        사용자 3 입니다.
      </div>
    </div>
  );
}

export default App;

---

단점

이런 식으로 히스토리 API를 사용할 수 있는데, 신경써야할 부분이 너무나도 많아진다.

 

단독적으로 수행되는 것이 아니라 브라우저에 API에 의해서 관리되므로 각각의 브라우저마다 실행 결과가 다를 수도 있는 것이고, 또 그에 따른 결과 출력도 각각으로 해주어야 할 것이다.

 

이런 것을 조금 없애고자 우리는 다음 시간에 react-router-dom을 이용해서 조금 더 예술적으로 구현해볼 것이다.