React Router에서의 네비게이션 상태

목록에서 제품을 클릭하면, 제품 페이지가 처음 로드될 때는 지연이 발생하지만, 나머지 경우에는 빠르게 로드되는 것을 볼 수 있습니다. 제품 추가 및 업데이트 시에도 마찬가지로, 클라이언트 측에 캐시가 있기 때문입니다.

이번 수업에서는 사용자에게 우리 페이지의 상태가 어떻게 되는지 보여줄 것입니다. 이를 위해 훅 useNavigation이 도움을 줄 수 있습니다. 이 훅은 작업 결과로 일련의 속성을 가진 객체를 반환합니다. 우리는 그 중 하나인 state 속성에 관심을 가질 것입니다.

state 속성은 3개의 값을 가질 수 있습니다: 'idle' (아무 일도 일어나지 않음), 'submitting' (POST, PUT, PATCH 또는 DELETE를 통해 폼을 제출할 때 경로의 action이 호출됨), 'loading' (다음 페이지를 렌더링하기 위해 다음 경로의 로더가 호출될 때). 우리는 마지막 값에 관심을 가질 것입니다.

파일 root.jsx로 이동하여 이 훅을 가져오겠습니다:

import { useNavigation } from 'react-router-dom';

그런 다음, 훅이 반환하는 결과에 대해, Root 함수 내에서 return 전에 변수 navigation를 선언하겠습니다:

const { products } = useLoaderData();
const navigation = useNavigation();

이제 이 변수의 state 속성을 사용하겠습니다. 값이 'loading'이면, 제품 데이터 렌더링이 이루어지는 div에 클래스 loading를 설정합니다:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

이제 index.css에 클래스 loading에 대한 스타일을 추가하기만 하면 됩니다. 로딩 상태일 경우 간단히 opacity를 높이겠습니다:

div.loading {
	opacity: 0.3;
}

이제, 사이트를 다시 로드한 후 목록의 제품들을 클릭하거나, 예를 들어 새 제품을 추가하면, 다음 페이지가 나타나기 전에 현재 페이지가 잠시 흐려지는 것을 볼 수 있습니다.

이전 수업들의 과제에서 만든 애플리케이션을 가져오세요. 수업 자료를 활용하여, 훅 useNavigation을 사용하여 사용자가 다음 학생 데이터 페이지가 로드 중임을 볼 수 있도록 만드세요.