인프런 커뮤니티 질문&답변

homie님의 프로필 이미지
homie

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

swr 활용법(optimistic ui)

유저 정보 관리 방법

해결된 질문

작성

·

492

0

안녕하세요 강의 들으면서 제로초님 github(front-rq폴더) 보고 react-qeury로 진행하고 있는데요

로그인 페이지를 보면 fetcher로 유저정보 요청하고 로그인 mutation 요청 성공시 refetchQueries로 'user'라는 키값의 요청을 다시 보내는 것 같습니다. 

이후 다른 컴포넌트나 페이지에서도 그냥 

const { data: myData } = useQuery('user', () => fetcher({ queryKey: '/api/users' }));

이런식으로 유저정보를 가지고 오는 것 같은데 궁금한 것은 

아직 강의 뒷부분을 다 안들어서 그런지 몰라도 staleTime이나 cacheTime을 설정하는 코드 또는 강의에서 말씀해주신 것 처럼 fetcher를 여러개 둬서 유저정보를 비동기 요청이 아니라 전역 데이터로 관리하는 로직도 없는 것 같습니다.

별도의 설정없이 /api/users 요청을 useQuery로 계속 받아온 다면 react-query 라이브러리를 사용하는 장점이 없는 것 같은데

제가 놓치고 있는 부분이 있는건 아닌지
혹시 react-query 사용했을 때 api/users 같은 유저정보를 받아오는 server state를 관리하는 좋은 방법은 무엇일지 궁금합니다.
(cacheTime을 설정하거나 전역 데이터를 저장하는 fetcher를 두거나 아님 localStorage 같은 곳에 저장하거나 등등..
redux 강의 들을땐 그냥 리덕스 스토어에 저장해두고 useSelector로 가져온 거 같은데 react-query 나 SWR은 요부분이 감이 안잡히네요 ㅠ)

 

 

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

그런 전역 관리를 위해서 리덕스같은 것을 쓰는 겁니다. 그게 아니면 리액트쿼리에 각종 옵션으로 최대한 가져오기 주기를 늦추거나요.

homie님의 프로필 이미지
homie
질문자

답변 감사합니다! 로그인 성공 시 staleTime을 infinity로 하고 회원 정보 수정 요청 같이 필요할 때만 이 쿼리를 refetch하고 싶은데 어렵네요,, 

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

한 번만 fetch하고 필요에 따라 refetch하려면 애초에 react-query를 쓸 필요가 없습니다. 그냥 axios만 쓰면 되죠.

homie님의 프로필 이미지
homie

작성한 질문수

질문하기