React Query 의 select 옵션으로 바로 필터링하기

React Query의 select 옵션은 서버에서 받아온 데이터를 클라이언트에서 사용하기 전에 변환하거나 가공할 수 있는 기능을 제공합니다. 이를 통해 필요한 형식으로 데이터를 미리 처리한 후 컴포넌트에서 사용할 수 있습니다. select 옵션은 주로 데이터 필터링, 매핑, 특정 형식 변환 등과 같은 작업에 사용됩니다.

✏️ 사용법

select 옵션은 useQuery 훅의 옵션 객체에서 사용됩니다. select 옵션은 서버에서 받아온 데이터를 인자로 받고, 변환된 데이터를 반환하는 함수를 지정합니다.

const { data } = useQuery(queryKey, fetchFunction, {
  select: data => {
    // data를 변환하는 로직
    return transformedData;
  },
});

🐾 예시

데이터 필터링

서버에서 받아온 데이터 중 특정 조건을 만족하는 항목만 선택하는 예제입니다.

const { data } = useQuery('todos', fetchTodos, {
  select: data => data.filter(todo => todo.completed),
});

이 예제에서는 fetchTodos 함수로 받아온 모든 할 일 항목 중에서 completed가 true인 항목만 선택합니다.

데이터 매핑

서버에서 받아온 데이터를 다른 형식으로 매핑하는 예제입니다.

const { data } = useQuery('users', fetchUsers, {
  select: data => data.map(user => ({
    id: user.id,
    name: `${user.firstName} ${user.lastName}`,
    email: user.email,
  })),
});

이 예제에서는 사용자 데이터를 받아와서 firstName과 lastName을 합쳐서 name 필드를 생성합니다.

데이터 형식 변환 및 추가

서버에서 받아온 데이터의 구조를 변경하고 새로운 필드를 추가하는 예제입니다.

const { data } = useQuery('orders', fetchOrders, {
  select: data => ({
    totalOrders: data.length,
    orders: data.map(order => ({
      ...order,
      orderDate: new Date(order.orderDate).toLocaleDateString(),
    })),
  }),
});

예를 들어, 서버에서 받아온 원본 데이터가 다음과 같다고 가정합니다:

[
  {
    "id": 1,
    "orderDate": "2024-05-29T12:34:56Z",
    "customerName": "Kanye West",
    "totalAmount": 100
  },
  {
    "id": 2,
    "orderDate": "2024-05-30T14:56:23Z",
    "customerName": "Drake",
    "totalAmount": 150
  }
]

select 옵션을 사용한 후 변환된 데이터는 다음과 같은 구조가 됩니다:

{
  "totalOrders": 2,
  "orders": [
    {
      "id": 1,
      "orderDate": "5/29/2024",  // 변환된 날짜 형식
      "customerName": "Kanye West",
      "totalAmount": 100
    },
    {
      "id": 2,
      "orderDate": "5/30/2024",  // 변환된 날짜 형식
      "customerName": "Drake",
      "totalAmount": 150
    }
  ]
}

이를 통해 클라이언트 측에서 보다 쉽게 데이터를 사용할 수 있으며, 필요한 형식으로 데이터를 미리 처리할 수 있습니다.