react-router-dom 없이 라우팅 구현하기

jaehan·2023년 2월 5일
0

React

목록 보기
26/33
post-thumbnail
post-custom-banner

리액트 어플리케이션의 페이지 전환은 SPA(single page spplication)로 구현한다.

SPA란?

SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다.
페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고
전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않는다

SPA를 구현하기 위해서 브라우저 히스토리 API 기반으로 만들어진 react-router-dom`을 사용해왔는데 이 브라우저 히스토리 API로 간단히 구현해봤다

SPA 구현

필요 기능

  1. 자바스크립트에서 브라우저로 페이지 전환 요청 가능.
  2. 뒤로 가기와 같은 페이지 전환 요청을 자바스크립트에서 처리할 수있다.
    📌 두 기능다 서버로 요청을 보내지 않아야함

브라우저 히스토리 API

pushState, popState

History.pushState 는 페이지 이동 없이 주소만 바꿔준다.
브라우저 페이지를 이동하게 되면 window.onpopstate 라는 이벤트가 발생하게 되는데, pushState 를 했을때는 popstate 이벤트가 발생하지않고,
뒤 / 앞으로 가기를 클릭 했을때 popstate 이벤트가 발생하게 된다.

📌 pushState(state, title, url)
state : 브라우저 이동 시 넘겨줄 데이터
title : 변경할 브라우저 제목
url : 변경할 주소

구현하기

import { useEffect, useState } from "react";

function App() {
  const [pageName, setPageName] = useState("");
  useEffect(() => {
    window.onpopstate = (event) => {
      setPageName(event.state);
    };
  }, []);
  
  function OnClick1() {
    const pageName = "page1";
    window.history.pushState(pageName, "", "/page1");
    setPageName(pageName);
  }
  function OnClick2() {
    const pageName = "page2";
    window.history.pushState(pageName, "", "/page2");
    setPageName(pageName);
  }
  
  return (
    <div className="App">
      <button onClick={OnClick1}> page1</button>
      <button onClick={OnClick2}> page2</button>
      {!pageName && <Home />}
      {pageName === "page1" && <Page1 />}
      {pageName === "page2" && <Page2 />}
    </div>
  );
}

function Home() {
  return <h2>여기는 홈페이지, 원하는 페이지 클릭</h2>;
}
function Page1() {
  return <h2>page1</h2>;
}
function Page2() {
  return <h2>page2</h2>;
}

export default App;

코드 설명

위의 코드를 보면

  • useEffect 내부의 onPopState는 앞/뒤로가기 시에 실행되고 event.state는 pushState의 첫번째 인자값이다
  • onClick을 보면 '/page1 or 2'로 페이지 이동시킨다
  • pageName에 따라 home, page1, page2컴포넌트를 보여준다

❗️ 이런거 하나씩 신경쓰기 귀찮으니까 react-router-dom 제대로 공부해서 쓰자!

참고 : 실전 리액트 프로그래밍

post-custom-banner

0개의 댓글