React Router에서 저장소 데이터 가져오기

현재 우리 애플리케이션이 정적이라는 것을 알 수 있습니다. 이번 및 다음 강의에서 우리는 애플리케이션에 생명을 불어넣기 시작할 것입니다. 이미 다음 몇 강의 안에 React Router를 사용하여 상품 목록에 상품을 추가할 수 있을 것입니다.

이 강의에서는 먼저 저장소에서 데이터를 가져오는 방법을 다루겠습니다. 로컬 데이터 저장을 위해 <localForage> 저장소를 사용할 것입니다 (사용법과 장점에 대해서는 문서에서 읽어볼 수 있습니다). 이는 모든 최신 브라우저에서 지원하는 LocalStorage의 유사품입니다. 실제로 여러 저장소 기술의 통합입니다. 상대적으로 쉽게 사용할 수 있으며, 대용량 데이터, 다양한 유형의 데이터, 심지어 이미지까지 저장할 수 있습니다. 프로젝트에 설치해 보겠습니다. 터미널에 입력하세요:

npm i localforage

애플리케이션을 재시작합시다. src 폴더에 저장소 작업을 위한 함수가 포함될 파일 forStorage.js를 생성하겠습니다.

그럼, 저장소에서 상품을 로드하는 함수부터 시작하겠습니다. forStorage.js에 라이브러리 임포트를 추가하고 상품을 가져오는 함수 getProducts를 작성하겠습니다:

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

함수 코드 아래에 네트워크 지연(최대 0.7초)을 시뮬레이션하는 someNetwork 코드도 추가하여 함수의 정상적인 작동을 보장하겠습니다. 우리 상품이 "캐시된" 경우 저장소 작업 함수에는 지연이 없고, 그렇지 않은 경우 지연이 발생합니다. 나중에 이것이 어떻게 작동하는지 보게 될 것입니다:

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

이전 강의 과제에서 생성한 애플리케이션을 가져오세요. 애플리케이션에 localForage 저장소를 설치하세요.

강의 자료를 활용하여 파일 forStorage.js를 생성하고 저장소에서 학생 데이터를 가져오는 함수 getStudents를 작성하세요.