React Router에서 저장소로부터 URL 파라미터를 통해 페이지 데이터 로드하기

이제 우리 애플리케이션에 상품을 추가할 수 있습니다. 애플리케이션을 실행하고 버튼으로 상품 몇 개를 추가해 보세요. 이제 목록에서 상품 자체를 클릭해 보면, 각 상품이 아직 동일한 정적 페이지를 가지고 있음을 알 수 있는데, 이 페이지를 이번 강의와 다음 강의들에서 다룰 것입니다.

또 다른 중요한 점을 언급할 필요가 있습니다. 전체 URL은 세그먼트로 나뉩니다 - 이는 / 문자 사이의 URL 부분입니다. 아마 기억하시겠지만, 이 애플리케이션을 만들 때 'products/:productId' 경로를 지정했는데, 여기서 :productId는 동적 세그먼트라고 부릅니다. 이 앞에는 ':' 문자가 붙습니다. 이 세그먼트의 값은 변경되며, 바로 이 값이 URL 파라미터 (URL Params 또는 params)로 전달되어 특정 키 하에 로더에 전달됩니다. 우리의 경우 이는 params.productId가 될 것입니다.

목록에서 상품을 클릭할 때 브라우저의 주소 표시줄을 살펴보세요. 주소 표시줄의 마지막 세그먼트가 변경되는 것을 볼 수 있을 것입니다. 바로 이 값들이 로더에 전달될 것입니다. 그리고 우리 저장소의 상품들은 우리가 생성한 고유한 id를 가지고 있으므로, 우리가 필요로 하는 상품이 로드될 것입니다.

이제 간단한 설명을 마치고 마침내 상품 페이지, 구체적으로는 저장소로부터 데이터를 로드하는 작업을 다루어 보겠습니다.

익숙한 과정을 반복해 보겠습니다. 먼저 forStorage.js 파일에 저장소로부터 id를 기준으로 특정 상품 데이터를 가져오는 함수 getProduct를 추가하겠습니다. 여기서는 함수에 id를 전달하고, 따라서 상품이 "캐시"되어 있다면 지연 없이 출력될 것입니다:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

다음으로, 상품 배열을 가져와서 전달된 id를 기준으로 우리 상품을 찾아야 합니다:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

이전 강의들의 과제에서 생성한 애플리케이션을 가져오세요. 강의 자료를 활용하여, forStorage.js 파일에 id를 기준으로 학생 데이터를 가져오는 함수 getStudent를 생성하세요.