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