-
Notifications
You must be signed in to change notification settings - Fork 1
invalidateQueries vs refetch
Znero edited this page Dec 1, 2024
·
1 revision
쿼리 데이터를 오래된 상태로 유지하다 보면, 사용자 작업이나 데이터 변경으로 인해 실제 데이터와 동기화되지 않을 수 있습니다. 이를 해결하기 위해 React Query는 refetch와 invalidateQueries라는 두 가지 주요 방법을 제공합니다.
- 즉시 네트워크 요청을 통해 서버에서 데이터를 강제로 다시 가져옵니다.
- 조건을 무시하고 항상 새로운 데이터를 요청합니다.
- 비활성화된 쿼리도 수동으로 실행할 수 있습니다.
- 사용자가 명시적으로 데이터를 최신 상태로 갱신하고 싶을 때 유용합니다. (ex. 새로고침)
- 특정 쿼리를 "stale(오래된)" 상태로 표시합니다.
- 데이터가 stale로 표시되면, React Query는 자동으로 데이터를 다시 가져옵니다.
- 현재 사용 중인 쿼리는 백그라운드에서 자동으로 다시 가져옵니다.
- 불필요한 네트워크 요청을 줄이고 효율적으로 데이터를 갱신합니다.
- 주로 mutation 작업 이후 호출하여 데이터를 최신 상태로 유지합니다.
| 특징 | refetch |
invalidateQueries |
|---|---|---|
| 실행 시점 | 즉시 데이터를 다시 가져옵니다 | "stale" 상태로 표시, 필요한 시점에 가져옵니다 |
| 네트워크 효율성 | 조건 없이 항상 네트워크 요청 발생 | 필요할 때만 데이터를 다시 가져옴 |
| 유연성 | 비활성화된 쿼리도 강제로 실행 가능 | 여러 쿼리를 한 번에 무효화 가능 |
| 사용 상황 | 즉각적인 데이터 갱신이 필요할 때 | 데이터 변경 후 효율적인 갱신이 필요할 때 |
| 리렌더링 부담 | 리렌더링 및 네트워크 트래픽이 증가할 수 있음 | 리렌더링을 최소화하며 효율적인 갱신 가능 |
refetch는 꼭 필요할 때만!
- 빈번하게 사용하면 네트워크 트래픽 증가 및 성능 저하를 유발할 수 있습니다.
- 사용자 경험에도 부정적인 영향을 줄 수 있습니다.
가능하면 invalidateQueries
- 가능하면
invalidateQueries를 사용해 효율적인 데이터 갱신을 우선적으로 고려하세요. - 데이터 변경이 있을 때만 쿼리를 갱신하고, 네트워크 요청을 줄이는 데 적합합니다.