목록react-query (6)
FrontEngineer JungBam
갑자기 disabled?
프리패칭을 하는 훅을 만들어서 사용하던 중 발생한 disabled... 데이터를 가져오지를 못하는 문제가 발생했다. disabled에 대해서 tanstack에 찾아보니 state에 대한 내용과 함께 enabled 옵션을 다루고 있었다. 내가 해당 훅에서 사용한 코드는 아래와 같다. const [checking, setChecking] = React.useState(false); useQuery( [queryKeys.TIMES, question.question_no], () => mainAPI.getTimes(question.question_no, user_no), { onSuccess: (res) => { setTimes(Number(res.data.times)); }, staleTime: 60 * 60..
전역상태 관리 툴로 많이 사용되는 redux는 본인만의 흐름이 있어 처음에 접할 때에는 어려움이 있으나, 사실 흐름만 읽고 나면 어렵지 않다. (기본적으로 context API와 reducer를 접한 후에 redux를 공부하기를 추천한다.) redux를 이해할 때에 가장 쉽게 비유되는 것이 은행이다. 돈을 맡기고 돈에 대한 모든 과정은 은행에서 처리를 해준다. 은행에서 돈을 뽑기 위해 우리는 창구나 ATM 기기를 이용한다. redux도 이러한 흐름에서 이해해보자. 먼저 우리는 관리하고 싶은 상태를 은행인 store에 맡긴다. 이 은행은 자신의 정보를 사용할 수 있는 은행서버를 갖고 있고 이 은행 서버는 곧 provider라고 생각하면 된다. 이 provider를 통해서 store가 구독을 원하는 컴포넌트..
react-query로 프로젝트를 하고 느낀점(장점)
1. 비동기 작업이 너무 간단함.(fetch, redux-toolkit의 thunk) 별도의 코드라인 작성없이 useQuery 한방이면 끝. 2. 코드가 간결하고 직관적이라 코드의 흐름을 따라가기 쉬움. 코드를 작성하고 나면 useQuery의 옵션을 통해 직관적으로 성공했을 때의 로직과 실패했을 때 로직, 아래 코드에는 없지만 항상 실행시키는 로직, 그리고 mutation에서는 onMutate까지 코드의 흐름을 읽기 너무 좋다. 3. DX 측면에서 개발 생산성 향상 이번 프로젝트에서 가장 많이 느낀 것은 refetch의 활용! 서버 상태와 일치시키고 싶은 순간 refetch함수 호출이면 끝. 4. staleTime 과 cacheTime을 통한 불필요한 서버 요청 최소화 처음 리액트 쿼리를 배울 때에 개발..
패칭이 되는동안 로딩화면을 띄우길 원하지 않을 경우 사용하는 방법 : 미리 페이지를 패칭해서 캐싱 + 이전 페이지를 캐싱 1. 페이지네이션에서 미리 페이지를 패칭해서 캐싱하는 방법 : 다음 페이지를 패칭해서 캐싱한다. const queryClient = useQueryClient() useEffect(() => { if(currentPage fetchPosts(nextPage)) } }, [currentPage,queryClient]) 2. 이전 페이지를 캐싱하는 방법 : useQuery의 옵션 중 keepPreviousData를 ..
useQuery의 첫번째 매개변수 - 기본적으로 리액트 쿼리는 쿼리 키를 기반으로 쿼리 캐싱을 관리함. - 쿼리 키는 고유한 값을 가져야 함.( useQuery 와 useInfiniteQuery간에도 고유해야 함.) - 쿼리 함수가 변수에 의존하는 경우 쿼리 키에 변수를 포함해야 함. => const result = useQuery(['todos',todoId],()=>fetchTodoById(todoId)) 리액트 쿼리에서 캐싱이란? 캐싱이란? - 명령어와 데이터를 디스크 캐시 등에 일시적으로 저장하는 과정 리액트 쿼리에서는 캐싱을 어떻게 관리할까? - staleTime과 cacheTime을 통해 관리함.(useQuery의 세번째 매개변수 옵션 중 일부) - staleTime : 데이터가 오래된 것으로..