클라이언트 사이드 라우팅이 동작하는 과정에 대해 설명해주세요.
분야: 프론트엔드
클라이언트 사이드 라우팅은 브라우저에서 페이지를 전환할 때 전체 페이지를 다시 불러오지 않고, 현재 로딩된 애플리케이션 내에서 필요한 컴포넌트만 교체하는 방식입니다.
클라이언트 사이드 라우팅의 과정에 대해 구체적으로 설명드리겠습니다.
기본적으로 사용자가 <Link to="/about">About</Link>와 같은 요소를 클릭하면, 브라우저는 바뀐 URL에 따라 전체 페이지를 다시 로드하려고 합니다. 하지만 React Router와 같은 라이브러리를 사용할 경우, 이 기본 동작은 막히게 됩니다.
이때 라우터는 window.history.pushState() 메서드를 호출하여 브라우저의 URL을 바꾸면서도, 실제로 서버에 요청은 보내지 않습니다. 즉, 브라우저 히스토리에 해당 URL을 추가만 할 뿐, 아무런 렌더링도 일으키지 않습니다. 대신 라우터는 별도로 현재 URL이 변경되었는지 감지하고, 그 경로에 매핑된 React 컴포넌트를 찾아서 렌더링합니다.
예를 들어, /about이라는 경로로 이동하면, Javascript 코드에 의해 라우터가 내부적으로 정의된 <Route path="/about" element={<AboutPage />}> 항목을 찾고, 이때 <AboutPage /> 컴포넌트가 렌더링됩니다. 이렇게 하면 전체 HTML을 다시 불러오지 않아도 브라우저가 마치 새로운 페이지로 이동한 것처럼 보이게 됩니다.
또한, 이 과정에서 필요한 데이터가 있다면, 새롭게 렌더링된 컴포넌트 내에서 useEffect() 등을 통해 API 요청을 보내거나 상태를 업데이트합니다. 이러한 동작이 JavaScript로 이뤄지기 때문에, 네트워크 요청은 서버 HTML이 아니라 데이터에 집중되고, 사용자에게는 빠른 페이지 전환을 제공할 수 있게 됩니다.
그리고 브라우저의 "뒤로 가기"나 "앞으로 가기" 버튼을 눌렀을 때는 popstate 이벤트가 발생합니다. 이때도 React Router는 해당 이벤트를 구독하고 있다가, 바뀐 URL을 다시 분석해서 그에 맞는 컴포넌트를 렌더링합니다. 따라서 사용자가 뒤로가기 버튼을 눌러도 전체 리프레시가 일어나지 않고, CSR 방식으로 화면 전환만 일어나게 됩니다.