내일배움캠프 React_7기 TIL - 25. Routing (클라이언트 사이드 라우팅, History API)

라우팅

라우팅이란, 사용자의 요청을 적잘한 페이지나 리소스를 반환해주는 방법.
MPA에서는 각 URL에 대응하는 HTML 페이지를 서버에서 반환하지만, SPA인 React에서는 클라이언트 사이드에서 라우팅을 처리하여 페이지를 동적으로 전환한다.

서버사이드 라우팅 vs 클라이언트 사이드 라우팅

• 서버사이드 라우팅
  사용자가 페이지를 요청할 때 마다 서버에서 HTML 페이지 전체를 생성하여 클라이언트로 전달.
  페이지 전환 시마다 서버에 요청을 보내고 전체 HTML을 새로 로드하는 방식 (사용자 경험이 떨어질 수 있다.)
  SEO(검색 엔진 최적화)에 유리함

• 클라이언트 사이드 라우팅
  사용자가 최초에 페이지를 로드한 이후, 브라우저 내에서 js로 페이지를 제어하여 필요한 콘텐츠나 컴포넌트를 동적으로 업데이트하여 빠른 반응성 제공.

클라이언트 사이드 라우팅의 동작 원리

Path Fragment

• Path Fragment(#)는 URL의 # 뒤에 오는 문자열을 의미한다. (https://example.com/page#section1 에서 #section1이 Path Fragment임)
• 주로 같은 페이지 내 다른 섹션으로 이동될 때 사용.
• Fragment로 페이지 상태를 표시하거나, 그 값을 활용할 수 있음
• SPA에서 사용됨, 전체 페이지를 새로 로드하지 않고 Fragment 부분만 변경하여 콘텐츠를 동적 제어.

history API

• 브라우저의 히스토리 기록을 제어하고 관리할 수 있는 JavaScript API
• history.pushState(), history.replaceState() 등을 사용하여 URL과 히스토리 스택을 제어 가능
• 페이지 전환 시 히스토리 스택을 제어하면서도 전체 페이지를 새로 로드하지 않고 콘텐츠만 갱신할 수 있어, 클라이언트 사이트 라우팅에 유용하다.

history API 실습

https://www.daleseo.com/js-history-api/ 를 참고하여 짧은 실습을 진행했다.
레포지토리 - > Practice_HistoryAPI

function navigate(state) {
  const h1 = document.querySelector("h1");
  h1.textContent = state.path.toUpperCase();
}

["home", "about", "contact"].forEach((path) => {
  const button = document.querySelector("#" + path);
  button.addEventListener("click", () => {
    const state = { path };
    history.pushState(state, "", path);
    navigate(state);
  });
});

window.addEventListener('popstate', (event) => {
  navigate(event.state)
})

• navigate : state객체를 인자로 받아 path를 대문자로 변경하여 h1으로 텍스트를 보여주는 함수
• 버튼마다 click 이벤트 리스너를 추가하여 클릭 시 history.pushState()로 현재 state 객체를 히스토리 스택에 추가하고, h1으로 보여준다.
• popstate 이벤트 : 브라우저의 히스토리 스택을 변경하여 뒤로 가기나 앞으로 가기 등의 동작을 할 때, popstate 이벤트 리스너가 실행된다. navigate() 함수로 이전 상태를 보여준다.