React-query

서버 상태 데이터를 다루는 방법서버에서 데이터를 받아오는데 걸리는 시간을 컨트롤하고 데이터가 로딩되는 시간동안 보여질 것들과 에러에 대한 처리를 해야한다.리액트 쿼리는 데이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해 주고, 정해진

백엔드에서 데이터를 받아오기 위해서 useQuery를 사용한다.api.js받아올 페이지result 자리에 디스터럭처링으로 { data, error, isLoading, isError } 등을 넣어 활용가능동일한 queryKey를 사용하는 쿼리는 동일한 데이터로 간주되며

실제로 받아온 data 값이 있는지 없는지 나타내는 상태값pending : 아직 상태값을 받아오지 못한 상태 - isPendingsuccess : 데이터를 성공적으로 받아 온 상태 - isSuccesserror : 데이터를 받아오는 중에 에러가 발생한 상태 - isE

데이터를 미리 복사해두어 백엔드에 요청할 필요없이 빠르게 가져올 수 있다.속도를 높일 수 있다.네트워크 비용을 절약할 수 있다.컴포넌트가 랜더링 되었을 때 useQuery()가 실행되는데 이때 queryKey에서 설정한 키의 이름으로 캐시에 저장된다. 이는 리액트 쿼리

1. 개요 > 서버에 데이터를 생성, 업데이트 또는 삭제하는 비동기 작업을 관리하는 데 사용 Mutation은 형태나 구조상의 변화라는 뜻으로 데이터 베이스에 새로운 값이 추가되거나 수정, 삭제가 되는 사이트 이펙트가 발생하는 경우에 해당 훅을 사용 useMuta

querykey의 배열을 활용하여 특정 데이터만 받아오기api.jshomepage.jsqueryKey의 배열에 지정한 이름을 넣어준다.username에 대한 쿼리만 캐싱이 된다.위 코드는 private 상태의 포스트만 받아올 수 있다.queryFn에서 화살표 함수 형태

어떤 상황이나 조건일 때 쿼리를 실행시키거나 의존 관계의 두 쿼리를 특정 순서대로 실행가능하게 한다.useQuery()의 enabled 옵션을 사용한다.enabled 값이 true가 되어야 해당 쿼리가 실행되는데 이를 dependant query라고 한다.첫번째 쿼리의

1. 개요 > 한번에 불러올 데이터들을 설정하고 그 다음 데이터를 설정한 개수만큼 불러온다. 2. 사용 1) 세팅하기 api.js 쿼리 파라미터로 page와 limit를 넘여주면 page의 데이터를 limit 개수만큼 보내도록 설계된다. 이때 page와 li

1. 개요 > 페이지네이션 대신 불러오기 버튼으로 이어서 불러오게 한다. (useInfiniteQuery 사용) 2. 사용 useQuery()를 useInfiniteQuery()로 바꿔줌 initialPageParam과 getNextPageParam 옵션을 설정