✅ 클라이언트 사이드 라우팅(Client-Side Routing) 동작 과정

1. 기본 동작 차단

일반적으로 <a href="/about">를 클릭하면 브라우저는 서버에 요청을 보내고, 전체 HTML을 다시 내려받습니다.

React Router 같은 CSR 라우팅 라이브러리는 이 기본 동작을 막습니다(preventDefault).



2. URL 변경 (History API 활용)

라우터는 window.history.pushState() 또는 replaceState()를 사용해 브라우저 주소창의 URL만 변경합니다.

이 과정에서 서버로 별도 요청은 가지 않고, 브라우저 히스토리에 기록만 남습니다.



3. 라우팅 매칭 → 컴포넌트 렌더링

라우터는 URL 변경을 감지한 뒤, 미리 정의된 라우팅 테이블에서 해당 경로와 매칭되는 컴포넌트를 찾습니다.

예: /about → <Route path="/about" element={<AboutPage />}>

그 결과, 전체 HTML을 다시 받지 않고 현재 SPA 내에서 필요한 컴포넌트만 교체 렌더링합니다.



4. 데이터 로딩 (선택적 단계)

새로운 화면에서 필요한 데이터는 컴포넌트 내부 useEffect()나 React Query 같은 데이터 fetching 라이브러리를 통해 별도 API 호출로 가져옵니다.

즉, HTML이 아니라 순수 데이터(JSON 등) 만 받아와서 UI를 업데이트합니다.



5. 브라우저 내비게이션 동작 처리

사용자가 뒤로/앞으로 가기 버튼을 누르면 popstate 이벤트가 발생합니다.

라우터는 이 이벤트를 구독하고 있다가, 변경된 URL에 맞는 컴포넌트를 다시 렌더링합니다.

따라서 뒤로 가기도 전체 새로고침이 아니라 SPA 내부 전환으로 동작합니다.





---

🔑 핵심 포인트 (면접용 정리)

서버 요청이 아닌 History API 기반 URL 변경

라우팅 테이블 기반 컴포넌트 교체 렌더링

데이터는 필요한 경우만 별도 API 호출

뒤로/앞으로 이동도 CSR에서 처리(popstate 이벤트)


이 과정을 통해 CSR은 빠른 페이지 전환, 네이티브 앱 같은 사용자 경험, 서버 부하 감소라는 장점이 있습니다.


---

👉 면접에서 답변하실 땐, 지금처럼 과정 설명 + 마지막에 **“이런 장점이 있기 때문에 CSR이 많이 쓰인다”**까지 붙여주시면 완성도가 높습니다.

원하시면 제가 CSR vs SSR(서버 사이드 렌더링) 차이를 비교 정리해 드릴까요? 면접에서 자주 이어지는 질문이라 대비해두면 좋아요.