2관문. useFetch with Cache

관문 2 / 7

동일 URL 요청을 캐싱하여 중복 네트워크 호출을 방지하는 useFetch 훅을 구현하라.

📖 이론 비급

useFetch with Cache: 중복 요청 방지

같은 URL을 여러 컴포넌트에서 요청하거나 컴포넌트가 재마운트될 때 매번 네트워크를 타지 않도록 모듈 레벨 캐시 맵을 활용한다.

const cache = new Map();을 훅 밖에 선언하면 모듈 생애주기 동안 지속되는 캐시로 활용할 수 있다. loading, error, data 세 가지 상태를 하나의 훅으로 캡슐화한다.

⚔️ 수련 코드

import { useState, useEffect } from 'react';

const cache = new Map();

// TODO: useFetch 훅을 구현하라
// 캐시에 데이터가 있으면 바로 반환
// 없으면 fetch 후 캐시에 저장
// { data, loading, error } 반환
function useFetch(url) {
}

export default function Post({ postId }) {
  const { data, loading, error } = useFetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );

  if (loading) return <p>로딩 중...</p>;
  if (error) return <p>에러: {error.message}</p>;
  return <h3>{data?.title}</h3>;
}

Open Sandbox