8장 React Query | Notion

React Query

서버 상태 관리를 자동화해주는 라이브러리 (로딩, 캐싱, 동기화 등)

주요 Hook

`useQuery`

GET 요청에 사용
자동으로 loading, error, data 상태 관리

const { data, isLoading, isError } = useQuery("users", fetchUsers);

`useMutation`

POST, PUT, DELETE 요청에 사용
폼 전송 등 사용자 행동 기반 변경 작업 처리

특징

기능	설명
자동 캐싱	동일 쿼리는 최초 1회 요청 후 캐시 사용
자동 리페치	조건 만족 시 자동 재요청 (예: 창 포커스 시 최신 데이터)
실패 재시도	네트워크 오류 시 자동 재시도
오프라인 지원	오프라인 상태에서도 캐시 사용 가능, 온라인 복귀 시 재요청

npm install @tanstack/react-query@latest

1. 데이터 요청 함수 (fetchUsers)

const fetchUsers = async () => {
  const response = await axios.get("http://localhost:8080/ch09/user2");
  return response.data;
};

목적: 서버에서 사용자 목록을 가져오는 함수입니다. 이 함수는 API에서 데이터를 GET 요청하여 받아옵니다.
axios.get을 사용해서 서버에서 사용자 목록을 불러오고, 그 데이터를 반환합니다.

2. 삭제 요청 함수 (deleteUser)

const deleteUser = async (uid) => {
  const response = await axios.delete(
    `http://localhost:8080/ch09/user2/${uid}`
  );
  return response;
};

목적: 특정 사용자를 삭제하는 함수입니다. 이 함수는 사용자 ID (uid)를 받아서 DELETE 요청을 보냅니다.