SERIES

React Query

5 Posts·Last updated on May 08, 2023

쿼리 키와 쿼리 함수

May 06, 2023

쿼리 키 는 쿼리 키를 기반으로 쿼리 캐싱을 관리한다. 따라서 특정 쿼리 키를 가진 데이터를 가져와야 할 때 이미 캐싱된 데이터가 있다면 그 데이터를 가져와서 사용한다거나, 혹은 무효화해서 새롭게 가져오도록 한다거나 하는 동작이 가능하다. 부터 쿼리 키는 배열로 작성해야 하는데, 배열의 내부에는 이 들어갈 수도 있고 가 들어갈 수도 있다. 같은 키…


Tanstack Query(React Query)

May 06, 2023

는 선언적인 방식으로 서버의 상태를 클라이언트로 가져오고, 캐싱하고, 동기화하고, 업데이트 할 수 있는 라이브러리이다. 등장 배경 서버 상태는 다음과 같은 특성을 갖는다: 실제 데이터가 통제할 수 없는 원격 위치에 존재한다. 데이터를 패칭하고 업데이트하는데 비동기적인 API를 필요로 한다. 실제 데이터가 다른 사람에 의해 변경될 수 있다. 데이터를 적…


서버의 데이터 가져오기

May 07, 2023

서버의 데이터를 가져오는 경우에는 , , 를 사용한다. useQuery 하나의 에 해당하는 단일 데이터를 서버에 요청할 때 사용한다. 예제 코드 파라미터 queryKey 패칭한 데이터를 캐싱하는 데 사용하는 고유한 키이다. 쿼리 키가 변화하면 는 해당 쿼리 키에 대한 데이터를 새롭게 반영한다. queryFn 데이터를 패칭할 때 동작하는 함수이다. 보…


서버의 데이터 변형하기

May 08, 2023

useMutation 서버에 새로운 데이터를 추가하거나 기존의 데이터를 수정하거나 삭제하는 등의 조작을 하기 위해서는 을 사용한다. 파라미터 mutationFn 가 동작하면 작동하는 함수이다. 보통은 서버에 비동기 API 요청을 하는 코드를 작성한다. : 함수의 인자로 전달한 값 onMutate 가 동작할 때 작동하는 함수로, 보다 빨리 실행된다…


낙관적 업데이트(Optimistic Update)

May 08, 2023

서버가 응답하는 결과를 클라이언트에서도 미리 예측이 가능한 경우에는 응답을 받기까지 기다리는 시간이 사용자 입장에서 답답하다고 느껴질 수 있다. 이럴 때 서버로 보낸 요청이 당연히 성공할거라는 낙관적인 생각을 가지고 변경 사항을 미리 반영하는 방법을 사용할 수 있는데 이를 낙관적 업데이트(Optimistic Update)라 한다. 예를 들어서 게시글의 좋…