❗ useQuery의 select 옵션
useQuery의 select 옵션은 react-query 라이브러리에서 제공하는 기능으로 response 데이터에서 원하는 데이터를 선택하는 역할을 한다.
select 옵션은 useQuery의 세 번째 인자로 전달되며, 선택적으로 사용할 수 있고 이 옵션을 사용하면 서버로부터 받은 response 데이터에서 특정 필드나 속성을 선택하여 사용할 수 있다.
예를 들어, user 객체가 있고 해당 객체에 username 필드가 있다고 가정해보자면 select 옵션을 사용하여 user 객체에서 username 필드만 선택하도록 설정할 수 있다.
import { useQuery } from 'react-query';
function User() {
const { data } = useQuery(['user'], fetchUser, {
select: user => user.username,
});
return <div>Username: {data}</div>;
}
위와 같이 select 옵션을 설정하면, useQuery가 반환하는 객체의 data 속성에는 user 객체에서 선택한 username 필드의 값만 저장이 된다. 따라서 이 값을 UI에서 표시하거나 다른 용도로 사용할 수 있다.
select 옵션은 데이터의 구조를 변경하는 것이 아니라, 해당 데이터를 사용할 때 필요한 필드만 선택하여 효율적으로 활용할 수 있게 해준다.
다른 예제도 살펴보자.
내가 select 옵션으로 사용할 예제는 데이터를 필터링 하는 예제이다.
아래 라디오 버튼을 통해 staff의 가능한 treatment를 필터링 할 것이다.
function filterByTreatment(
staff: Staff[],
treatmentName: string,
): Staff[] {
return staff.filter((person) =>
person.treatmentNames
.map((t) => t.toLowerCase())
.includes(treatmentName.toLowerCase()),
);
}
function useStaff(): UseStaff {
const [filter, setFilter] = useState("all");
const fallback: Staff[] = [];
const selectFn = useCallback(
(data) => filterByTreatment(data, filter),
[filter]
);
const { data: staff = fallback } = useQuery([queryKeys.staff], getStaff, {
select: filter === "all" ? undefined : selectFn,
});
return { staff, filter, setFilter };
}
완성된 코드를 바로 살펴보자. 일단 filterByTreatment는 데이터 필터링을 위해 만들어진 함수라는 것을 알리고 시작하겠다.
우리가 주목해야할 함수는 바로 useStaff 훅이다. 해당 훅 내에서도 특히
const selectFn = useCallback(
(data) => filterByTreatment(data, filter),
[filter]
);
const { data: staff = fallback } = useQuery([queryKeys.staff], getStaff, {
select: filter === "all" ? undefined : selectFn,
});
해당 부분을 주시해야한다.
추가로 useCallback의 의존성 배열에 있는 filter가 어떻게 바뀌게 되는지 궁금해 하실 수 있는 분들을 위해
컴포넌트 코드를 첨부하겠다.
<RadioGroup onChange={setFilter} value={filter} />
필터링을 위해 라디오 버튼을 누르면 onChange를 통해 filter useState가 계속 바뀌는 형태를 띄게 구성이 되어있다.
라디오 버튼 클릭을 통해 filter 값이 "all"이 된다면 select 속성이 없으므로 전체 데이터가 반환될 것이고,
그렇지 않은 경우에는 selectFn이 호출되어 해당 필터링된 데이터가 반환되며
해당 결과를 볼 수 있다.
정리하자면 그냥 useQuery를 통해 데이터를 불러와가지고 select 옵션으로 원하는 애만 빼다가 쓰는 옵션이다.
파이팅 !
'자바스크립트 - React.js' 카테고리의 다른 글
[ReactQuery] useMutation에 대해서 알아보자 ! (feat. Optimistic Updates, invalidateQueries) (0) | 2023.07.28 |
---|---|
[ReactQuery] refetch에 대해서 알아보자 ! (feat. 전역 refetching, Polling) (0) | 2023.07.24 |
[ReactQuery] Query Key - 의존성 배열을 활용해보자 ! (2) | 2023.07.14 |
[ReactQuery] 데이터를 미리 가져와 캐시에 넣는 Prefetching ! (0) | 2023.07.10 |
[ReactQuery] QueryClient의 defaultOptions를 사용한 전역 에러 핸들링 (0) | 2023.07.06 |