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

1. select옵션이란?

useQuery에 queryFn에서 받아온 데이터를 변환해주는 옵션이다.

2. select옵션의 특징

먼저 react-query 자체는 불필요한 연산을 줄이는 최적화를 하는데 이를 메모이제이션이라고 한다.

select 옵션은 해당 옵션으로 변환한 데이터와 함수가 모두 변경되었을 경우에만 실행된다.

즉, 마지막으로 검색한 데이터와 동일한 데이터이고 select 함수에도 변동이 없다면 select 함수를 재실행 하지 않는 것이 react-query의 최적화이다.

따라서 select 옵션에 함수를 지정한다면 안정적인 함수가 필요하다.

안정적인 함수로 만들고 싶을 때는 해당 함수를 메모리에 저장하는 useCallback을 사용해서 적용할 수 있다.

3. select옵션 예시

select: (data: TData) => unknown

select 옵션은 매우 단순하게 data를 인수로 받고 해당 data을 토대로 변형한다.

여기서 data는 queryFn을 통해 받아온 데이터이다.

즉, data는 실질적으로 캐시에 저장되는 데이터이고 실제 렌더링에만 변형된 데이터를 렌더링 시키게 할 수 있는 것이다.

select 옵션으로 데이터를 변형시켰다고 해서 변형된 데이터가 queryKey로 지정한 쿼리에 저장되는 것은 아니다.

unknown에는 하나의 로직을 넣을 수도 있고 해당 로직이 길다면 함수로 따로 빼서 함수에 인수를 전달하여서 정의해 줘도 된다.

"Firebase"를 이용해서 위와같이 더미데이터를 하나 만들어 주었다.

그 후, 해당 데이터에서 "isAuth"값이 true일때는 해당 "nickname"만 렌더링 하도록 구현해 볼 것이다.

그러기 위해선 해당 데이터를 받아오는 API 함수와 해당 데이터를 캐시에 저장하는 useQuery를 정의해 줘야 한다.

그다음, queryKey와 queryFn을 정의해 주고 select 옵션을 정의해 주면

위와 같이 해주면 useQuery을 통해서 받아온 데이터는 해당 키에 값으로 캐시에 저장하고 select 옵션으로 정제한 데이터는 "useUser" 커스텀훅의 return 값으로 반환되게 된다.

또한 마지막으로 select 옵션을 이용한 반환 값과 비교하여서 다른 점이 없다면 select는 실행되지 않는다.

위와 같이 벗어난 포커스를 다시 맞춰줄 때 select 결과와 마지막으로 변환한 데이터와 변화가 없다면 select 함수를 다시 실행하지 않지만 select 함수의 결과가 마지막으로 변환한 데이터와 다르다면 select 함수를 실행시켜서 바뀐 데이터를 반환해 주는 형식이다.

여기서 데이터는 select함수를 통해서 정제시킨 데이터를 뜻한다.

select옵션은 이와같이 API로부터 받아온 데이터를 정제하고 싶을 때 사용하면 매우 유용한 옵션이다.

다만 헷갈리지 말아야 하는 점은 캐시에 있는 데이터는 select옵션과 별개로 API요청을 통해 받아온 전체 데이터를 저장한다는 점이다.