Routing
라우팅은 출발지에서 목적지까지의 경로를 결정하는 기능이다.
서버 사이드 렌더링 방식의 라우팅
기존의 웹은 요청시마다 새로고침이 발생하여 서버로부터 리소스들을 받아 렌더링하게 되는데, 이러한 서버가 html을 내려주는 방식을 서버 사이드 렌더링(Server-side rendering, SSR)이라고 부른다.
각 페이지마다 다른 HTML, CSS, Javascript 파일이 필요하고, 미리 서버에서 HTML뷰가 완성되어 있어 처음 로딩이 빠르다.
하지만 요청이 발생할 때 마다 페이지 전체가 렌더링되기 때문에 굉장히 비효율적이다.
클라이언트 사이드 렌더링 방식의 라우팅
리액트 라이브러리를 사용하는 애플리케이션은 한 페이지에서만 동작하는 싱글 페이지 애플리케이션(SPA)으로써, 사용하는 라우팅은 클라이언트 사이드 라우팅(Client-Side Routing)이다.
클라이언트 사이드 라우팅은 서버로 어떤 요청도 보내지 않는다. 모든 라우팅은 Javascript가 수행한다.
모든 페이지가 같은 HTML, CSS, Javascript 파일을 가지고, 페이지를 이동할 때마다 Javascript에 맞는 HTML뷰를 생성해서 로드해준다.
단점은 아직 들어가지도 않은 뷰에 대한 자바스크립트를 미리 가지고 있어서, 초기 로딩이 서버사이드 렌더링에 비해서 느리다.
SPA앱 라우팅을 JS만으로 구현한다면 어떻게 할까?
react를 사용할 땐 react-router와 같은 Third Party 라이브러리를 많이 사용한다. 이 라우팅으로 인해 사용자는 새 콘텐츠가 필요할 때마다 서버에 요청할 필요가 없다.
초기 애플리케이션을 로드할 때 모든 웹 사이트 콘텐츠를 로드하고 URL 경로 이름에 따라 페이지에 올바른 콘텐츠를 동적으로 표현한다.
SPA 라우팅을 구현하는 방법은 두가지가 있다.
- history (Browser History)를 사용한 방법
- hash (Hash History)를 사용한 방법
history를 사용하는 방법 (Browser History Mode)
history라는 API를 사용한다.
history API의 pushState와 window 객체의 popstate 이벤트를 이용한다.
history.pushState(state, title[, url]);
// state : 새 데이터 전달을 위한 상태위의 형태로 작성한다.
window.history.pushState({ data: 'some data' },'Some history entry title', '/some-path')
window.onpopstate = () => {
Div.innerHTML = routes[window.location.pathname]
}Browser History의 url의 형태는 site/some-path와 같이 표현되지만 이 방법은 서버 측 지원이 일부 필요하다. 예를 들어 존재하지 않는 경로로 접속할 경우 오류를 출력한다. 이런 문제를 해결하고 대체할 url은 서버에서 지정해야 한다.
hash를 사용하는 방법 (Hash History Mode)
hash를 사용하는 방법은 # 앵커를 통해 이동하는 방법으로 site/#some-path와 같이 url이 표현된다. 보통 정적 페이지에서 사용되며 블로그의 주 제목을 클릭 후 앵커 이동 시 url에 #이 붙는다.
현재 url의 hash는 window.location.hash를 통하여 확인 할 수 있으며, 라우팅 시스템을 구축할 경우 이 window.location.hash를 이용하여 라우팅을 변경할 수 있다.
hash가 변경될 때마다 popstate와 같이 hashchange 이벤트가 발생하기 때문에 hashchange를 통하여 라우팅을 변경할 수 있다.
window.addEventListener("hashchange", funcRef, false);위의 형태로 작성한다.
window.addEventListener('hashchange', () => {
Div.innderHTML = routes[window.location.hash.replace('#', '')]
})보통 hash History는 웹 페이지 내부에서 이동을 위할 것으로 history가 관리되지 않는다. 서버가 없는 정적 페이지 경우에는 hash History로 라우팅 처리가 가능하다.
라우팅에서 파라미터를 넘기는 방법
function useQuery() {
return new URLSearchParams(useLocation().search);
}
let query = useQuery();
<User name={query.get("name")} />query string을 URLSearchParams 인스턴스 로 변환하고 search속성을 사용하여 query string을 얻을 수 있다.
그 후 get 메서드에 키를 넣어주면 값을 얻을 수 있다.
