스탠다드 반 강의 메모 조금
Tanstack Query 에서 서버상태는 언제 설정(set) 되는가
queryFn이 실행되어 값을 반환하는 즉시, 그 값이 QueryClient 의 서버상태로 설정된다.
isPending 과 isFetching 의 차이
라이브러리 v5 부터 isLoading 의 명칭이 isPending 으로 변경됨.
isPending 은 QueryClient에 아직 데이터가 없고 쿼리가 아직 실행 대기중인지 여부
isFetching 은 쿼리가 현재 실행중인지 여부 (초기로딩 및 refetching 을 모두 포함)
isLoading -> isPending으로 쓰기 (해당 QueryClient에 아직 데이터가 없고 쿼리가 아직 실행 대기 중인지 여부 = 요청 전일 때)
isFetching (쿼리가 현재 실행 중인지 여부. 초기로딩 및 refetching 포함)
QueryFunction Context
?.
앞에 있는 게 true면 뒤에 있는 걸 불러오고, 앞에 있는 게 false면 undefined 불러온다.
Optimistic Update
좋아요 같은 거 누르면 UI 반영이 먼저 되도록, 좋아요 상태를 먼저 렌더링 하고 API 요청 보내서 DB에 반영되도록 구현하는 방법.
서버 연결 상태가 느려도 즉각적으로 화면에는 나타나서 좋아요, 북마크 등의 기능을 구현할 때 실무에서도 자주 쓰인다.
코드를 외울 필요는 없고, 공식 문서 보면서 적용하면 됨.
https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#optimistic-updates
useMutation의 mutationFn은 매개변수를 한 개만 받을 수 있다!
두 번째 예시처럼 객체로 감싸줘도 됨
아웃소싱 프로젝트 시작. 초기 세팅
개발 환경 세팅 (설치해주기)
- supabase
- yarn
- tailwindCSS
- react-router-dom
- tanstack Query
- axios
- zustand
