전체 글 (204) 썸네일형 리스트형 [React Custom Hook] async 로 Mock Data 제공하는 hook (useFakeFetch) 1. async 로 Mock Data 제공하는 hook input resolvedData: 제공할 mock data waitingTime : setTimeout 기다리는 시간, 몇 초 후 리턴 output { loading, setLoading, data, setData } : 로딩, 리턴받는 데이터 state useFakeFetch.ts 코드 import { useEffect, useState } from "react"; interface FakeFetchResult { loading: boolean; setLoading: React.Dispatch; data: T[]; setData: React.Dispatch; } const useFakeFetch = (resolvedData: T[], waitin.. useQuery enable (false) 비활성화 일때 isLoading = true 인 이슈 useQuery 를 사용하면서 특정 조건에 따라서 query 를 실행/미실행 하려고 한다 const { data, error, isLoading } = useQuery( ["test", "detail", id], () => getDetail({ id }), {enabled: !!id} ) id가 있을 때만 query 요청하기 조건 기준이 되는 값은 반드시 queryKey 에 포함이 되어있어야 enabled 가 작동된다 id 가 없어서 query 요청을 안하는 경우인데도 isLoading = true 로 설정되어, 로딩 스피너가 계속 돌았다. 이에 대한 해결책은 react-query v4에서 isInitialLoading이라는 새로운 인자를 반환해준다. react-query 공식 문서에서 isInitial.. useEffect 마운트 되었을때는 실행하지 않고, dependancies 가 실제로 변경된 경우에만 실행 시키기 // 최초 마운트시 실행 되지 않고, dependencies 가 실제 변경된 경우에만 실행 const didMount = useRef(false); useEffect(() => { if (didMount.current) { setValue("connectProductId", null); } else didMount.current = true; }, [watch("countryId")]); 이전 1 ··· 11 12 13 14 15 16 17 ··· 68 다음