stateless하게 유저정보 관리하기

 

하고자 하는 것

현재 react query를 활용하여 cache로 전역 스테이트 관리 라이브러리를 사용하지 않고 

stateless하게 정보를 관리 중이다. 

그렇게 해서 프로젝트의 복잡성을 줄이고 

전역 스테이트 관리 라이브러리를 사용하지 않아 빌드 용량을 줄이려 시도중이다. 

 

만일 필요한 전역상태가 있다면 setQueryData를 활용하여 사용하는 중이다. 

 

문제점

로그인 성공시 유저의 정보(이름)을 응답값으로 보내주어

응답값을 ['user'] 라는 queryKey에 저장하였다.

그리고 user 페이지에서 user의 이름만 필요한 상태이므로

해당 queryKey로 caching되어있는 유저의 정보를 가져와서 사용중이다. 

 

그러나 setQueryData는 cacheTime이 기본 값으로 5분이며

setQueryData를 할 때 수정하려고 했으나 수정이 되지 않았다.

 

 

상황 파악

user페이지의 로직은 단순히 

저장되어있는 getQueryData를 가져오는 것 뿐이다.

 

의도한 바는 login이 유효한 시간 

즉 jwt token이 만료되기 전인 1시간동안은 

cache가 유효함으로써 

user정보를 요청하는 비용은 발생하지 않아도 된다. 

 

그런데 지금 상태는 SignupForm과 LoginForm에서 react-query를 사용하지 않고 있어서

해당 로직을 사용하지 못하였다. 

 

 

해결 

signupForm과 LoginForm의 로직을 react query로 사용하고 

queryKey는 getQueryData와 동일한 ['user']로, 

cacheTime을 로그인 유효시간과 동일한 1시간으로 설정한다면

setQueryData에서 캐시타임을 개별 설정하려는 복잡성은 없어질 것이다.