본문 바로가기

react-query2

데이터를 useMutation으로 가져오는 건 괜찮을까? 일반적으로 React Query의 useMutation은 서버에 데이터를 전송(POST, PUT, DELETE 등) 하는 작업에 사용합니다.반대로 데이터를 가져오는 작업(FETCH) 은 useQuery로 처리하는 것이 표준적인 방식입니다.하지만 특정 상황에서는 useMutation을 사용해서 데이터를 가져오는 것이 더 적절한 경우도 존재합니다. 🧩 상황 설명: 버튼 클릭 시 조건에 따라 API 호출이 필요한 케이스현재 진행 중인 프로젝트에서는 버튼 클릭 이벤트를 통해 특정 플래그 값을 기준으로 다음 동작을 결정해야 했습니다.이러한 경우 useQuery는 컴포넌트 마운트 시점에 자동 실행되기 때문에, 사용자 액션에 따라 조건부로 실행되는 useMutation이 더 적합했습니다.🛠️ 실제 구현 예시// .. 2024. 6. 11.
전역 상태 관리를 위한 React Query 도입 ✅ React Query를 도입한 이유1. 데이터 캐싱 및 자동 RefetchingReact Query는 서버 상태를 캐싱하고, stale(오래된) 상태라고 판단되면 자동으로 데이터를 다시 가져옵니다.자동 리페칭이 일어나는 대표적인 상황은 다음과 같습니다:브라우저에 다시 포커스가 들어왔을 때컴포넌트가 새로 마운트되었을 때네트워크가 끊어졌다가 다시 연결되었을 때💡 React Query는 캐싱된 데이터를 항상 stale로 간주하고, 필요시 자동으로 최신 데이터로 동기화합니다.→ 이를 통해 불필요한 API 호출을 방지하고, 서버 부담을 줄일 수 있습니다.2. Query Key를 통한 데이터 공유React Query는 Query Key를 기준으로 데이터를 캐싱 및 공유합니다.동일한 Query Key를 사용하면.. 2023. 3. 19.