#리액트쿼리

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

리액트 쿼리에서 사용자 인증관련 코드 질문있습니다.

아래 코드처럼 리액트쿼리로 사용자 인증 코드를 구현했습니다. ( 외국 개발자분 코드 분석해서 거의 복붙하고 조금 수정 ) 간단히, api요청을 해서 유저 정보를 받아 로컬스토리지에 저장해서 사용하는 코드입니다. 이 훅을 프라이빗 라우터 및 로그인 버튼 or 사용자 이름 표시 UI 에 사용중인데요 쿼리 캐시 때문에 계속 요청을안하고 그값만 계속 사용중인데 이 사용자의 토큰 유효기간이 지났는데도 계속 그 값만 사용중입니다. 이 분기처리를 어떻게 해줘야할지를 모르겠습니다. 처음엔 refetchOnMount: false,를 true로 바꿔주고 토큰 유효값이 지나면 에러를 뱉어주는거를 보고 흡족해했으나 네트워크탭을 살펴보니 새로고침, 페이지 인아웃 할때마다 계속 요청을하고있어서 다시 고민에빠졌습니다. 어떤식으로 해줘야 할까요?.. 가장 생각나는건 statleTime 값을 토큰 유효기간 값만큼 설정해주면 될까 인데.. 이렇게해줘도되나요?

리액트쿼리 사용법 이게맞나요?

좀 이상합니다.. 상황이, 1. 로그아웃 후 게시물작성 페이지로 접근하면 프라비잇 라우터 컴포넌트 + 사용자인증 훅 (리액트쿼리) 로 인해 '/' 로 잘 튕겨집니다. 2. 로그인 후 게시물 작성페이지로 접근하면 '/' 로 튕겨집니다. 최소 두번은 게시물 작성 페이지로 접근하던가, 새로고침후 접근해야 접근이 가능합니다. axios header 토큰 및 유저 정보 불러오는 api에서 리턴해주는 값들을 다 콘솔찍어서 확인해봤는데 이상없었습니다. 딱한군데 사용자인증 훅쪽만 이상이있었습니다. 아래 코드에 삽입된거에서 콘솔(userLoginInfo) 하면 언디파인이 나오는데요.. 신기한게 fetchUserInfo에서 콘솔 res.data하면 유저정보가 잘찍힙니다..ㅠㅠ 혹시 뭐떄문에그런걸까요?

리액트쿼리 고수 찾아요!

현재 관리자페이지를 구현중에 있습니다. 수정페이지와 추가페이지를 하나의 컴포넌트 페이지로 구현하려다보니 페이지 진입했을 때에 useParams 로 분기를 나누어 해당 깂으로 useQuery 사용하여 수정일때는 get 하고 추가일때는 안하도록 enabled 옵션을 사용해서 구현하였더니 페이지 컴포넌트 내에 console.log 가 몇수십번씩 찍힙니다ㅠㅠ 리랜더링이 되는것 같은데.. enabled 를 사용히지 않으면 리랜더링이 저렇게 많이 되지 않습니다. 추가와 수정페이지를 나누어서 구현해야할지 다른 해결방법이 있을까요?

리액트쿼리(useQuery) 질문이 있습니다.

개인 프로젝트에서 useQuery를 커스텀 훅으로 사용중입니다. (v5 사용중이며, staleTime과 gcTime은 기본값 사용중. staleTime 0, gcTime은 5분) 테스트를 위해 컴포넌트에서 자체 state를 변경했습니다. 리랜더링이 되기에 훅 안에 있는 useQuery도 다시 실행되는 걸 기대했습니다. 그런데 network탭을 보니 서버 요청이 안되더라구요..!(최초 요청 하나만 표시) 데이터가 stale한 상태에서 state변경시 useQuery는 데이터를 다시 fetch해와야하는 것 아닌가요~? 왜 이런지 궁금합니다..!

프론트엔드개발자 미니 프로젝트

안녕하세요! 현재 왔다갔다 고민 중인 그런.. 상황입니다 ㅎㅎ 고민인 사항은 기존 todolist 를 리팩토링하는게 좋을지, 새로운 프로젝트를 만들어보며 좋을지 가 고민 사항입니다. 기존에 리액트를 학습하면서 정말 기본의 crud 만 구현해놓은 프로젝트가 있습니다. 그 흔한 context api를 사용하지 않은 상태입니다..ㅎㅎ zustand, tanstack query, ts 등등 이 스택들을 이제 막 익혀보려는 상황에 있는데요.. (습득 아닙니다 이제 막 시작하려고해요ㅠㅠ) 공식문서를 읽는다 해도 직접 사용해보지 않아서 잘 모르겠더라구요.. 그래서 저 스택들의 기여가 적어도 일단 적용은 해서 익혀볼까? 라는 마음인데 기존의 todolist 에 뭐 검색, 최신순 정렬 등의 기능을 추가하면서 저 스택들을 사용해볼까 , 아님 아예 새로운 미니 프로젝트를 각잡고 만들어보는게 나을까 싶은 고민입니다.. todo가 작은 프로젝트인데 규모에 비해 과하게 기술을 적용하는건가? 싶기도 하고 포트폴리오에도 넣어야하는데 todo 넣는게 맞나.. 다들 이렇다 할 프로젝트를 내놓는 마당에 아예 각잡고 새로운 프로젝트를 해야하는지 참 고민인 시점입니다 ㅠㅠ 아니면 리액트쿼리, zustand 등 익히기 위해서 괜찮은 학습방법에 대해 공유해주셔도 감사할 것 같습니다. 쏟아지는 기술들에 도대체 뭐부터 해봐야하나 정신이 혼미한 상태이므로...ㅎㅎ 도움이나 의견 주시면 감사하겠습니다 !!

리액트쿼리 고수분들 도와주세요

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!

프론트엔드 신입 기술스택 ?

안녕하세요. 제가 멘토링을 받았는데 리액트쿼리, 타입스크립트,리덕스까지는 신입조건 필수라고 하더라구요ㅠㅠ 근데 저는 지금 자바스크립트하고,, 리액트까지는 계속 프로젝트하면서 해봐서 조금 익숙해졌는데 .. 꼭 필수일까요.. ? 신입인데 너무 높은것같이 느껴집니다.ㅠㅠ 음...리덕스는 파이어베이스로 로그인 구현할때 한번써봤는데 과연 이걸 써봤다고하더라도 이력서에 넣는게 맞는지에 대한 의문이 듭니다. 리액트쿼리, 타입스크립트는 한번도 안써봤습니다. restfurapi사용할줄알고 파이어베이스도 리액트도 스타일드컴포넌트도 다 필요하다하니 열심히 해놓았는데 해야할게 왜이렇게 많을까요 ? 제가 했던 프로젝트에서 왜 이기술을 사용했는지, 다른것과 차별점이 무엇이있었길래 이런 방법을사용한건지에 대한게 중요한것 아닌가요 ? 채용공고에 올라와있는 우대사항은 타입스크립트 등등에 대한 것들이긴한데 그것에 얼추라도 맞추어야 서류를 통과할수있느걸까요..? ,,ㅜ,,,,

Nextjs 13 서버 컴포넌트 데이터 페칭 질문있습니다.

어제 공식문서를 공부를 조금 해봤는데 데이터 페칭은 왠만하면 서버컴포넌트 측에서 한다고 봤습니다! 근데 만약 데이터를 페칭하는데 필터를 거치는 데이터는 어떻게 해야할까요? 예를들면 리스트가 있는데 낮은가격순 높은가격순 등등으로 필터링을해서 다시 데이터를 리렌더링해야하는데 이럴경우 state로 하려합니다. 근데 서버컴포넌트에선 useHook같은걸 못써서 어떻게 해야할지 잘모르겠습니다. 이럴경우 그냥 클라이언트 컴포넌트로 만들고 리액트쿼리 써야하는걸까요?

리액트쿼리 질문입니다

리액트쿼리를 많이사용해본 분들께 질문드리고싶어요. 주변에 토이 프로젝트 하는분들 보면 뮤테이션을 사용할때, 보통 onSuccess로 invalidateQuries하거나 refetch로 다시 가져오더라고요. 그런데 응답값으로 새로운 값을 주고있다면, 그걸 setQueryData로 캐시 업데이트하면 되는것 아닌가요? 특정 뮤테이션 결과에 따라 연관있는 여러api를 다시 불러와서 업데이트해야한다면 그만큼 api들을 전부 다시호출하는데요. 캐시업데이트보단 그냥 다 무효화 하는분들이 많던데 그냥 그게 편해서 그런건가요? 예를들어 게시물 하나를 수정하면, 게시글목록 다시불러오고, 개별 게시글 다시불러오고 하는데요. 백엔드에서 생성된게시글을 리턴값으로 준다면, 그걸로 개별 게시글은 캐시업데이트해주는게 낫지않나요?

react query 적절하게 사용하는 방법

안녕하세요 프론트엔드를 공부하고있는 학생입니다. 제가 데이터 요청시에 항상 리액트 쿼리를 사용해왔었는데 사용하다보니 로그인같이 어플리케이션에서 딱 한번만 사용하게 될때는 굳이 필요없다고 갑자기 느끼게되었습니다! 제가 궁금한건 1. 다들 모든 부분에서 리액트 쿼리를 쓰는지 혹은 필요한 부분에서만 사용하고 나머지는 axios 호출로 처리하는지 2. jwt 기반 로그인과 oauth에서도 리액트 쿼리를 쓰는게 효율적인지 3. axios로 처리할수있는걸 리액트쿼리로 굳이 처리했을때 성능상의 이슈가 약간이라도 있는지? 입니다!