리액트 쿼리는 이렇게 queryKey 를 통해서 캐싱을 하는데 같은 키로 요청이 들어오면 서버에 요청하지 않고 캐싱된 값을 반환함
우선 최상단에서 Map 자료구조를 생성한 뒤에
cacheProvider를 만들어서 하위 컴포넌트들로 주입시켜줬음
이렇게 하면 서버로 부터 받아온 데이터를 새로고침 하지 않는 이상 최상단 메모리에 저장을 할수 있게된다.
처음에는 Map의 키를 배열로 할 수 있기 때문에 그냥 배열로 사용해봤는데 이게 참조값을 기준으로 확인하기 때문에 계속 새로운 키로 저장되버려서 JSON.stringify로 string으로 변환한 후에 사용했다
ex) [’trim’, 1] → ‘[trim, 1]’ 이런식으로
이렇게 먼저 Map에서 key로 값을 가져온 다음에 만약 값이 있다면 그대로 반환하고 아니면 fetch 요청을 통해 반환하고 Map에 그 값을 할당하는 방식으로 구현했음
❓ 그럼 값이 바뀌는 곳에는 어떡하냐 → 내차만들기는 값이 바뀔일이 거의 없다고 생각해서 내차만들기에만 적용했고 react-query에서는 이걸 stale time이라는 걸로 해결하는데 한번 찾아봐라!
❗️ 그리고 이렇게 키에 변수를 넣게 되면 변수 값이 바뀔때 마다 다른 키로 값을 가져올 수 있고 똑같은 변수값이 들어오면 캐시 값을 가져오기 때문에 효율적으로 fetch cache 가능!