🌺 React-query 공부하기

 

본의 아니게 프듀식 운영을 해버렸다. 1대1 옾챗을 이용하도록 하자

---

 

🌺 React Query

React 애플리케이션에서 서버 상태 관리를 용이하게 하는 라이브러리

데이터 페칭, 캐싱, 동기화, 업데이트 등의 과정을 자동화

1. 데이터 페칭: useQuery와 같은 훅을 사용하여 비동기 데이터를 쉽게 로드하고, 컴포넌트에 자동으로 반영
2. 캐싱: 로드된 데이터를 자동으로 메모리에 저장하고, 동일한 요청이 재발생할 때 캐시에서 빠르게 데이터 가져옴
3. 백그라운드 업데이트 및 리프레시: 애플리케이션의 데이터를 최신 상태로 유지하기 위해 백그라운드에서 데이터를 주기적으로 업데이트
4. 데이터 동기화: 여러 컴포넌트와 페이지에서 동일한 데이터를 사용할 경우, 데이터의 일관성을 유지
5. 오류 관리: 데이터 로드 과정에서 발생할 수 있는 오류를 캡처하고 처리하는 메커니즘을 제공

---

예시

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://api.mysite.com/posts').then(res => res.json());
}

function Posts() {
  const { data, error, isLoading } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

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

 

꽃모양의 아이콘 : 현재 불러오고 있는 데이터들이 무엇이 있는지 한눈에 보며 관리 가능

---

🌺 Query

Query는 주로 데이터를 읽는 데 사용

즉, 서버에서 데이터를 가져오고, 자동으로 캐싱하며, 이 데이터를 UI에 표시하는 용도로 사용

 

서버에서 사용자 목록을 가져오기 예제

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function Users() {
  const { data: users, error, isLoading } = useQuery('users', fetchUsers);

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

---

🌺 Mutation

Mutation은 데이터를 수정, 추가 또는 삭제할 때 사용

 

새로운 사용자를 생성하는 API를 호출 예제

import { useMutation } from 'react-query';

const createUser = async (user) => {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
  });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function CreateUserComponent() {
  const { mutate, isLoading, isError, error } = useMutation(createUser);

  const handleCreateUser = () => {
    mutate({ name: 'New User', email: 'test@example.com' });
  };

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

  return <button onClick={handleCreateUser}>Create User</button>;
}

---

써보자.

 

fetch 말고 axios랑 같이 쓰기