SPA(SinglePageApplication)
단일 페이지 어플리케이션으로 기존 사이트와 다르게 처음 로딩시에 모든 데이터를 불러와 브라우저가 바뀌는 부분만 업데이트 하는 기법을 말한다. 이는 페이지전체를 불러오는것과 다르게 사용자들에게 빠르게 콘텐츠를 보여줄 수 있음
따라서 SPA를 만들때 페이지 전환이 아니라 컴포넌트를 바꿔치기하는 방법으로 구현하려고 목표를 잡았다.
history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다.자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있습니다.
브라우저 api에서 자체적으로 history에 관한 정보와 매서드를 지원하고 있었다 따라서 이를 이용해서 SPA를 구현해 보려고 한다.
Web History 란 무엇인가? (History API)
그리고 실제 사용하는 react-router-dom을 까보는 블로그 글이 있어서 해당 글을 읽으며 분석을 진행해 보았다.
<BrowserRouter>
<NavigationBar>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/user/:id" element={<UserPage />} />
<Route path="/campaign" element={<CampaignPage />} />
<Route path="/oauth/kakao" element={<KakaoRedirectPage />} />
</Routes>
</NavigationBar>
</BrowserRouter>