리액트 쿼리

리액트 쿼리란?
서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고
효율적으로 관리할 수 있는 라이브러리이다.

Redux
클라이언트 상태 관리
전역 UI 상태, 로그인 정보
캐싱 및 비동기 직접 구현
React Query
서버 상태 관리
API 데이터 자동 캐싱
로딩/에러 상태 자동 제공
프론트에서 Fetch를 보내는 경우
fetch만 사용하는 경우
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch("/api/posts")
.then(res => res.json())
.then(data => setData(data))
.catch(err => setError(err))
.finally(() => setLoading(false));
}, []);
fetch + React Query
const fetchPosts = async () => {
const res = await fetch("/api/posts");
return res.json();
};

const { data, isLoading, isError } = useQuery({
queryKey: ["posts"],
queryFn: fetchPosts,
});
리액트 쿼리의 장점
1. 서버 상태 관리에 특화
Redux와 달리 클라이언트 상태가 아닌 서버 상태 관리에 집중
API 응답 데이터의 생명주기(요청, 캐싱, 갱신)를 자동으로 관리
2. 캐싱을 자동으로 제공
동일한 요청에 대해 중복 API 호출을 방지
이전에 받아온 데이터를 캐시로 즉시 제공하여 UX 향상
3. 로딩 / 에러 상태를 자동 관리
isLoading, isError, error 상태를 기본 제공
Redux나 fetch처럼 상태 변수를 직접 만들 필요 없음
4. 보일러플레이트 코드 감소
Redux의 action, reducer, dispatch 불필요
순수 fetch 대비 코드량 대폭 감소
5. 중복 요청 및 경쟁 상태 방지
동일한 queryKey 요청은 하나만 실행
컴포넌트 여러 개에서 사용해도 안전
마무리
React Query는 단순한 데이터 요청 도구가 아니라,
서버 상태를 효율적으로 관리하기 위한 데이터 관리 라이브러리이다.

Redux나 순수 fetch로 직접 구현해야 했던
캐싱, 로딩·에러 처리, 중복 요청 방지 등의 기능을 자동화하여

프론트엔드 코드의 복잡도를 크게 줄여준다.
서버 데이터 중심의 애플리케이션에서는
React Query를 활용하는 것이 더 효율적인 선택이 될 수 있다.