K
KRYFT Problem Bank
프론트엔드 보통 코딩

React Query 데이터 페칭

TanStack Query로 서버 상태 관리

40분
85점
#3743

문제 설명

TanStack Query(React Query)를 사용하여 효율적인 데이터 페칭 레이어를 구현하세요.

요구사항

  • 게시물 목록 조회 (무한 스크롤)
  • 게시물 상세 조회 (캐시 활용)
  • 게시물 생성/수정/삭제 (Optimistic Update)
  • 좋아요 기능 (낙관적 업데이트)
  • 검색 (디바운스 적용)

구현할 커스텀 훅


usePosts(filters) - 게시물 목록 (무한 스크롤)
usePost(id) - 게시물 상세
useCreatePost() - 게시물 생성
useUpdatePost() - 게시물 수정
useDeletePost() - 게시물 삭제
useLikePost() - 좋아요 토글
useSearchPosts(query) - 검색

평가 기준

  • 캐시 전략
  • 낙관적 업데이트 정확성
  • 에러 처리
  • 로딩 상태 관리
실행 버튼을 눌러 코드를 실행하세요.