기본 흐름
- 페이지 진입 시 Query로 목록 로드
- 사용자 액션으로 Mutation 실행
- 성공 시 관련 Query 무효화
- 재조회된 데이터로 화면 동기화
실전 예시 (React Query)
todos.tsx
const listQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
});
const createMutation = useMutation({
mutationFn: createTodo,
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
});로딩/에러 상태 처리
TodosList.tsx
if (listQuery.isLoading) return <p>불러오는 중...</p>;
if (listQuery.isError) return <p>오류: {String(listQuery.error)}</p>;
return (
<ul>
{listQuery.data.items.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);60분 챌린지 연결 지점
- 프론트엔드 단계: 화면 구성
- 연결 단계: API 응답 반영
- HTTP/API 기초: 요청/응답 개념 보완
초심자 실수 TOP 3
- Query 결과를 로컬 상태로 또 복사해서 동기화 꼬임
- Mutation 성공 후 목록 재조회(invalidate) 누락
- 로딩/에러 상태 처리를 생략해 빈 화면만 보임
검증 체크리스트
- 네트워크 탭에서 요청이 실제로 나가는지 확인
- 성공 후 목록 요청이 다시 나가는지 확인
- 실패 시 사용자에게 에러 메시지가 보이는지 확인