search

seeoya / bapbaksa

[2024. 04. 25 ~ 2024. 05. 23] 그린 아카데미 Node.js & React 기반 풀스택 개발자 양성과정 - 3차 Node.js & React 프로젝트
0 stars 3 forks source link

react query 추가 #51

Closed seeoya closed 5 months ago

seeoya commented 5 months ago

REST 서버에서 받아오는 레시피 리스트, 재료 리스트, 마켓 아이템 리스트를 react query를 이용해 저장하도록 추가 필요

seeoya commented 5 months ago

REACT QUERY 사용법

  1. client/src/query 폴더에 query js 파일 생성 (redux처럼 모아서 확인하기 위해)
  2. 값을 가져올 땐 useQuery, PUT, DELETE 등 작업할 땐 useMutation을 사용 https://github.com/seeoya/bapbaksa/blob/bc229f1e33d9a0359dec13125e8be2edd9aa35d0/client/src/query/fridgeQuerys.js#L1-L106
  3. 함수 내용 작성 (axios)
  4. 사용 시 useQuery는 data, mutation은 mutate를 받아와서 실행 https://github.com/seeoya/bapbaksa/blob/bc229f1e33d9a0359dec13125e8be2edd9aa35d0/client/src/component/recipe/MyFridge.jsx#L7-L13 https://github.com/seeoya/bapbaksa/blob/bc229f1e33d9a0359dec13125e8be2edd9aa35d0/client/src/component/recipe/MyFridge.jsx#L43-L49

@post50 @Hanbiman @choiheebeom

c.c staleTime: 어느정도까지 신규 데이터로 체크할지 판단하는 기준 0 (갱신 바로바로 되어야 하는 경우) or Infinite (오래되어도 되는 경우)

gcTime: 캐시 유지되는 시간 0 (바로바로) or 1000 60 30 (30분 등등)

refetchInterval: setInterval 느낌으로 데이터 갱신함 (1000으로 하면 1초에 한번씩 서버에 요청하므로 주의)