Development/React.js

React Query

moretz0921 2022. 6. 5. 01:08

 

 

쿼리는 기본적으로 유니크한 키로 구분,
프로미스 기반 메서드(GET,POST등)로 서버에서 데이터를 가져올 수 있다.

서버의 데이터를 수정해야하는 경우는 Mutations를 사용하는 것이 적절하다.
컴포넌트나 커스텀 훅에서 쿼리를 사용하려면 useQuery를 호출해야한다.

 

 

query

: 기본적으로 유니크한 키로 구분 

 

useQuery('', api 함수)
// 인자를 받을 경우 익명함수로 콜백 처리 () => api 함수()

 

1) 결과 값에서는 중요한 상태 결과가 담겨 있다.

- isLoading : 데이터 변경 중

- isError : 에러 발생

- isSuccess : 데이터 변경 성공

- isIdle : 데이터 변경 불가능 

 

2) 병렬 쿼리 : 동시성을 최대화하기 위해 병렬로 실행되거나 동시에 실행되는 쿼리 
3) 종속 쿼리 : 이전 쿼리의 실행이 마무리 되어야 실행된다.

 

 

mutation

: 서버의 데이터 조회, 수정, 삭제 기능을 제공 

 

1) 상태 값을 가지게 된다. 

- isLoading : 데이터 변경 중

- isError : 에러 발생

- isSuccess : 데이터 변경 성공

- isIdle : 데이터 변경 불가능 

 

2) 사이드 이펙트

- onMutate

- onErrror

- onSuccess

- onSettled

 

 

custom hooks

: 상태관리 따로 사용할 때 추상화해서 사용 

'Development > React.js' 카테고리의 다른 글

React - 폼태그 처리  (0) 2022.06.15
react 옵셔널 체이닝  (0) 2022.06.13
React에서 SVG 다루는 법  (0) 2022.05.27
Next에서의 에러 페이지 만들기  (0) 2022.05.18
next/image hostname error  (0) 2022.05.18