최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서 다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.

일반적으로 사용자에게 보여주고 싶은 정보가 있을 때 캐시에 아직 데이터가 없는 경우 미리 데이터를 채워서 뷰포트에 렌더링 시킬 수 있다.

즉, 서버에서 받아온 데이터를 기다리는 동안 클라이언트에서 캐시에 데이터를 추가할 수 있는 것이다.

캐시에 데이터를 추가 혹은 렌더링만 시킬 수 있는 useQuery옵션에는 2가지가 있다.

1. placeholderData

데이터가 있는것처럼 동작하지만 실제로는 캐시에 추가하지 않는 옵션이다.

useQuery의 하나의 옵션으로 해당 옵션을 정의하면 임시 데이터를 렌더링 할 수 있다. 하지만 해당 데이터를 캐시에 저장하지 않는다.

따라서 고정값 혹은 함수를 사용할 수 있다.

즉, 달리 표시할 데이터가 없는 경우 사용하는 표시용 데이터일 뿐이며 다시 사용할 일이 없기 때문에 캐시에 추가하지 않는다.

1.1 placeholderData 사용법

위와같이 placeholderData을 지정해 놓으면 해당 옵션의 값은 비동기 API 요청이 완료되기 전까지 "data"변수에 정의된다.

위와같이 placehoderData정의된 값으로 먼저 렌더링 된 다음에 비동기 API요청이 성공적으로 완료된다면 API를 통해서 가져온 값이 렌더링 되는걸 확인할 수 있다.

ReactQueryDevTools로 확인해봐도 캐시에 데이터가 저장되지 않는 걸 확인할 수 있다.

캐시에 데이터가 저장되는게 아니므로 비동기 API요청이 3번 지나면 캐시에서 데이터를 불러올 수 없으므로 기존에 렌더링 된 placeholderData값이 렌더링에서 풀린다.

2. initialData

placeholderData와는 반대로 클라이언트에서 입력한 데이터를 캐시에 추가 해주는 옵션이다.

캐시에 데이터를 저장하는 옵션이므로 해당 데이터가 쿼리에 대한 유효한 데이터임을 공식적인 기록에 선언해 둘 필요가 있다.

2.1 initialData 사용법

위와같이 동작 자체는 placeholderData를 정의했을 때와 비슷하지만 차이점이라면 정의 했던 값이 캐시에 저장되어서 비동기 API요청이 실패하여도 해당 캐시 데이터로 렌더링을 유지할 수 있는 장점이 있다.

3. 각각의 옵션은 어떤 상황에 어울릴까?

보통 전적으로 각자의 프로젝트의 방향성이나 성향에 따라서 달라지겠지만

initialData은 다른 쿼리로부터 해당 쿼리를 채우려고 할 때

placeholderData은 그 밖의 모든 상황에서 사용한다.