728x90
useQuery
useQuery는 React Query 라이브러리 훅으로, 비동기 API 호출 결과를 캐시 하고,
캐시 된 결과를 사용하여 컴포넌트를 렌더링함.
이를 통해 반복된 요청이 반복되더라도 서버에서 계속 가져오는 것이 아니라 캐시 된 데이터를 사용해서 프로젝트 성능을 향상시킬 수 있음.
서버에서 데이터를 가져오는 GET 요청에 대한 데이터를 가져옴.
useMutation
useMutation은 API에서 데이터를 가져오는 것뿐만 아니라,
API에 새로운 데이터를 추가하거나 업데이트하는 등의 작업을 수행할 때 사용됨
이 훅은 API 요청에 대한 상태를 관리함. 성공, 실패 및 로딩 상태에 대한 콜백을 제공하고,
결과 데이터를 캐시 하고, 컴포넌트가 다시 렌더링 되면 결과를 자동으로 업데이트함.
서버 데이터를 변경하는 요청(POST, PUT, DELETE 등)을 처리하는 데 사용됨.
요약
useQuery는 읽기 전용 요청에 대해 사용되고,
useMutation은 쓰기 작업에 사용됨
ex) 제품 목록 조회 요청은 useQuery, 새 제품 추가요청은 useMutation
728x90
'TIL' 카테고리의 다른 글
| 146. [JavaScript] this의 4가지 동작 방식 TIL23.04.04 (0) | 2023.04.05 |
|---|---|
| 145. [React-Query] Query data cannot be undefined 에러 TIL.23.03.31 (0) | 2023.03.31 |
| 143. [React] cashe(캐시)란? TIL 23.03.15 (0) | 2023.03.15 |
| 142. [React] useNavigate로 state 넘기기 TIL23.03.14 (0) | 2023.03.14 |
| 141. [CSS] opacity 와 filter: brightness() 차이 TIL 23.03.13 (0) | 2023.03.13 |
댓글