2. 요청 메모이제이션

리액트는 Web API에서 기본으로 제공하는 fetch API를 확장하여 동일한 URL 경로에 대한 요청을 자동으로 메모이제이션해둠

따라서 개발자는 리액트 컴포넌트 트리 내에 존재하는 서로 다른 여러 컴포넌트들에서 동일한 데이터에 대한 fetch 함수를 여러 번 호출하더라도, 실제 요청 처리는 한 번만 수행되도록 할 수 있음

→ 다양한 컴포넌트들에서 여러 요청을 수행해도 중복 요청은 단일 요청으로 처리됨

예를 들어 여러 컴포넌트에서 동일한 데이터를 사용해야 하는 경우, 코드 레벨에서의 최적화를 위해 트리의 최상단에서 데이터를 가져오고, props를 통해 컴포넌트 간에 데이터를 전달하는 코드를 작성하지 않아도 됨

async function getItem() {
  // fetch()를 통해 데이터를 가져오는 요청 처리는 기억되고, 결과값도 캐시됨
  const res = await fetch('https://.../item/1')
  return res.json()
}
 
// 초기 요청에서는 아직 캐시되지 않았기 때문에 요청 처리가 수행됨
const item = await getItem() // cache MISS
 
// 두 번째 호출에서는 캐싱된 값을 활용하기 때문에 실제 요청 처리는 수행되지 않음
const item = await getItem() // cache HIT

2. 요청 메모이제이션의 동작 방식

요청 메모이제이션은 다음과 같이 동작함

1. 특정 라우트 경로(ex. /dashboard/invoices)를 렌더링하는 과정에서 fetch() 요청이 처음으로 호출되면 결과 값은 메모리에 저장되어 있지 않기 때문에 캐시 미스(MISS)가 발생

2. 따라서 외부 소스로부터 데이터를 가져오는 실제 처리가 발생하며, 이후에는 응답 결과 데이터가 메모리에 적재됨

3. 이후, 동일한 요청 경로에 대해 렌더링을 수행하는 과정에서 또 다른 컴포넌트를 통해 fetch()가 한번 더 호출될 경우, 캐시가 적중(HIT)하고 데이터는 메모리에 이미 적재되어 있기 때문에 실제 네트워크 요청 처리가 수행되지는 않음

4. 해당 라우트 경로에 대한 렌더링 처리가 완료되면, 메모리가 초기화되고, 모든 요청에 대한 메모이제이션은 기록은 지워짐