리액트 어플리케이션의 페이지 전환은 SPA(single page spplication)로 구현한다.
SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다.
페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고
전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않는다
SPA를 구현하기 위해서 브라우저 히스토리 API 기반으로 만들어진 react-router-dom`을 사용해왔는데 이 브라우저 히스토리 API로 간단히 구현해봤다
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
의 첫번째 인자값이다 ❗️ 이런거 하나씩 신경쓰기 귀찮으니까 react-router-dom
제대로 공부해서 쓰자!
참고 : 실전 리액트 프로그래밍