이전 react-query 정리 글
작업이 있다보니 리액트에 집중을 할 수 있는 환경은 아니지만, 짬짬히 뭐가있는지 체크하면서 공부중이다.
그리고 상태관리까지 완료되었으니, 정리후 팀장님에게 보고할 예정이다.
저번 글에 이어서 react-query마저 정리를 해보았다.
여러가지 기능은 존재하지만, 시작하는 단계에서 가장 중요하고 심플한 기능은
cache 기능과 stale기능 , refetchInterval 기능이다.
기능이라기보단 옵션...?
우선 refetchInterval 옵션은 number형태이며, 해당 쿼리를 반복할 시간을 설정하는 시간이다.
refetchInterval에서 설정한 값은 어떠한 옵션에도 구애받지않고, 나홀로 refetch를 날려버린다.
즉 캐시가 1시간 존재하니, stale이 30분동안이니 상관없다. 그냥 시간되면 refetch를 해버린다.
특이한점은 react-query자체가 브라우저를 활성화하지않으면 대기 상태로 가기때문에, refetchInterval 자체도 브라우저가 활성화되어있지 않다면 refetch를 하지않는다.
즉 굉장히 효율적인 반복 호출이다.
그다음은 stale인데, 아마 react-query하면 가장 강조되는 부분이 아닐까 싶다.
앞서 말한 refetchInterval에 이어지는 효율적인 호출에 관련된 부분인데
극단적인 예를들어 페이지가 3페이지인 게시판을 이동했다.
1페이지를 보다가 2페이지로 이동했지만, 별 내용이 없어서 다시 1페이지로 왔다
기본적이라면 (뒤로가기 제외) 1페이지 호출 -> 2페이지 호출 -> 1페이지 호출로 이어진다
그러나, stale 즉 상한 상태를 활용한다면
1페이지 호출 -> 2페이지 호출 -> 1페이지 쿼리 신선함 체크 ->신선하다? 이전 데이터 그대로 사용 / 상했다? 새롭게 호출
이 되는것이다.
물론 staleTime은 직접 설정이 다 가능하며, 중요한 데이터일경우 낮은숫자나, 주지 않으면 되고, 값의변경이 없는경우는 높은 숫자를 주는것이 좋다.
콘텐츠를 하드코딩이 아닌, DB로 관리한다했을때 가장 효율적인 사용처가 아닐까 싶다.
그다음이 바로 gcTime이다.
후.. 이놈은 암만찾아도 이해가 안가서 조금 고생했다..
나의 의문은 하나였다.
캐시? 뭐 미리 저장해둔다는건데, 어디다 쓰는거지? stale랑 쓰면 어차피 상할때마다 호출할껀데 캐시가 왜 필요하지??? 라는 생각이 가장 1순위였다.
여기서 내가 여러가지 찾고 내린 결정은 하나였다.
일종의 미리 띄우는 데이터 같은것이다.
기본적으로 fetch하는데 시간이 든다. 최소 0.5초 길면 5초 , 그이상까지도 시간이 걸리는데 5초가 걸리는 페이지를 2번 접촉할 경우 심지어, staleTime이 초과된 경우 UX적으로 굉장히 불편한 상황이 펼쳐진다.
5초동안 로딩을 본다거나...
그러나 gcTime은 이 상황에서 캐시로 가지고 있는 이전 데이터를 미리 보여준다.
상황적으로 예를든다면, 마이페이지에서 내가 닉네임을 수정했다.
그러나 닉네임을 호출하는데 5초가 걸린다.
수정 후 새로운 닉네임을 가져오는데 5초간 해당 닉네임란이 빈칸이거나, 로딩이될것이다.
그러나 캐시가 있다면 캐시에 있는값으로 우선 채워서 UX적으로 개선을 해주는것이다.
이로써 이전 react-query글과 함께 본다면, 기본적인 react-query는 이해하고 넘어가는게 가능하지 않을까 싶다.
