React Router에서의 클라이언트 사이드 라우팅

이번 강의에서는 싱글 페이지 애플리케이션(SPA)의 중요한 구성 요소인 클라이언트 사이드 라우팅을 살펴보겠습니다. 이러한 라우팅을 통해 서버에 추가 문서 요청 없이 브라우저에서 URL을 업데이트할 수 있습니다.

지난 강의에서 만들었던 애플리케이션을 실행하세요. 개발자 도구를 열고 그 안에서 '네트워크' 탭(Chrome의 경우 Network)을 여세요. 우리 링크를 클릭할 때마다 매번 document에 대한 요청이 표시됩니다. 즉, 서버에 매번 document를 불러오도록 요청하는 것입니다.

이제 React Router의 장점을 활용하여 이러한 요청을 제거해 봅시다. 이를 위해 애플리케이션의 root.jsx 파일을 열고 마크업의 a 태그를 Link 컴포넌트로 교체하겠습니다. 먼저 import를 추가합니다:

import { Outlet, Link } from 'react-router-dom';

이제 href 속성을 가진 a 태그들을 교체합니다. 다음 코드 조각 대신:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

이제 다음과 같은 코드가 됩니다:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

개발자 도구에서 '네트워크' 탭을 다시 열고, 주소 표시줄에 루트 경로를 설정하고 페이지를 새로 고침하세요. 이제 링크를 클릭해 보면, 초기 로드 시에만 document가 한 번 요청되었고 이후 클릭에서는 서버에 대한 요청이 더 이상 없다는 것을 볼 수 있습니다.

이전 강의 과제에서 만든 애플리케이션을 사용하세요. 강의 자료를 활용하여, 강의에서 설명한 대로 링크를 수정하여 클라이언트 사이드 라우팅을 구현하세요.