React

[React] tanstack query 캐시 정규화하기

woo.oing 2025. 11. 3. 16:25

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w

 

 

캐시 정규화 적용 예제

1. 현재 동일한 데이터가 두 번 중복으로 저장되어 있는 상태

 

["todo","list"] 쿼리

[
  { id: "1", content: "Todo 1", isDone: true },
  { id: "2", content: "Todo 2", isDone: true },
  { id: "3", content: "Todo 3", isDone: false },
];

 

["todo","detail","1"] 쿼리

{ id: "1", content: "Todo 1", isDone: true }

 

 

 

2. 정규화 적용 후

["todo","list"] 쿼리 → id 값만 배열로 저장

["1", "2", "3"]