React Query에서 데이터베이스를 사용하여 데이터 필터링 및 정렬

데이터 필터링 및 정렬을 위해 React Query의 데이터베이스 사용

React Query는 데이터 관리를 위한 라이브러리로, 데이터 필터링 및 정렬 기능을 구현하기 위해 데이터베이스와 상호 작용하는 기능이 있습니다. 이 기사에서는 React Query에서 데이터베이스를 사용하여 데이터를 필터링하고 정렬하는 방법에 대한 구체적인 예를 보여줍니다.

먼저 데모의 편의를 위해 id, title, Description, status, Create_at 필드가 포함된 "todos"라는 데이터베이스 테이블을 사용한다고 가정합니다.

다음으로 React Query를 설치 및 구성하고 데이터베이스에 대한 연결을 설정해야 합니다. 구체적인 설치 및 구성 단계는 React Query 공식 문서를 참조하세요.

React Query의 설치 및 구성을 완료하고 할 일 목록을 표시하기 위해 "TodoList"라는 컴포넌트를 생성했다고 가정합니다. 다음으로 React Query를 사용하여 데이터를 필터링하고 정렬하는 방법을 보여드리겠습니다.

먼저, 데이터베이스에 있는 모든 할일 데이터를 가져와야 합니다. "TodoList" 구성 요소에서 다음 코드를 사용하여 데이터베이스를 쿼리하고 할 일 데이터를 가져올 수 있습니다.

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery('todos', async () => {
    const response = await fetch('/api/todos');
    const data = await response.json();
    return data;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

이제 할 일 데이터를 성공적으로 얻었으므로 필터링 및 정렬 기능을 추가하겠습니다.

상태에 따라 할 일 데이터를 필터링한다고 가정하면 데이터베이스를 쿼리할 때 상태 매개변수를 추가하고 이 매개변수를 통해 데이터베이스에서 해당 데이터를 얻을 수 있습니다. 다음은 샘플 코드입니다.

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { status: 'completed' }], async (_, { status }) => {
    const response = await fetch(`/api/todos?status=${status}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

위 코드에서는 useQuery의 첫 번째 매개변수로 배열을 전달하여 쿼리의 키를 지정합니다. 배열의 첫 번째 요소는 쿼리의 고유 식별자로 사용할 수 있는 문자열 'todos'입니다. 배열의 두 번째 요소는 필터링 기준을 포함하는 개체입니다. 이 예에서는 { status: 'completed' }를 추가하여 완료된 할일 데이터만 가져오도록 지정합니다.

다음으로 정렬 기능을 추가하겠습니다. 할 일 항목을 생성 시간을 기준으로 내림차순으로 정렬한다고 가정해 보겠습니다. 데이터베이스를 쿼리할 때 정렬 매개변수를 추가하고 이 매개변수를 기준으로 데이터를 정렬할 수 있습니다. 다음은 샘플 코드입니다.

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { orderBy: 'created_at', order: 'desc' }], async (_, { orderBy, order }) => {
    const response = await fetch(`/api/todos?orderBy=${orderBy}&order=${order}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

위 코드에서는 useQuery의 첫 번째 매개변수로 배열을 전달하여 쿼리의 키를 지정합니다. 배열의 첫 번째 요소는 쿼리의 고유 식별자로 사용할 수 있는 문자열 'todos'입니다. 배열의 두 번째 요소는 정렬에 사용되는 매개변수를 포함하는 개체입니다. 이 예에서는 { orderBy: 'created_at', order: 'desc' }를 추가하여 생성 시간(created_at) 기준 내림차순을 지정합니다.

위의 코드 예제를 통해 React Query에서 데이터베이스를 사용하여 데이터를 필터링하고 정렬하는 방법에 대한 구체적인 구현을 보여줍니다. 물론 실제 프로젝트에서는 구체적인 구현이 다를 수 있으므로 필요에 따라 해당 조정을 수행해야 합니다. 동시에 사용하는 데이터베이스 및 백엔드 프레임워크에 따라 해당 쿼리 및 정렬 작업도 수행해야 합니다. 그러나 일반적으로 React Query는 데이터베이스와 상호 작용할 수 있는 매우 편리한 인터페이스를 제공하여 데이터 필터링 및 정렬을 더 쉽고 효율적으로 만듭니다.

위 내용은 React Query에서 데이터베이스를 사용하여 데이터 필터링 및 정렬의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!