TIL 23일차 정리

오늘은 선발대 과제를 마무리 하고 리액트 프로젝트를 시작하는 날이다.

 

오늘 중점은 선발대 과제를 하면서 처음 React-Query를 썻는데, 난 이게 오히려 Redux-thunk 보다 로직적으로 보일러 플레이트가 확 줄어들어서 좀 더 편하고 쉬운 라이브러리 인거 같다.

 

axios.get을 이용해서 json-server에 있는 파일을 불러 왔는데, 이 친구가 자꾸 브라우저 알탭하거나 그냥 조금만 이상한 행동을 해도 자꾸 데이터를 새로 받아와서 왜 그런지 알아보게 되었다.

 

React-Query 에는 staleTime 과 cacheTime 이라는게 존재한다. staleTime의 default 값은 0초 cacheTime의 default 값은 5분이다

일단 문제는 방금 받아온 데이터가 바로 fresh 상태에서 0초만에 staleTime으로 넘어가는게 문제였다.

 

이를 해결하기 위해서, staleTime 을 option으로 늘릴수 있다. 사실 엄청난게 deps가 깊은 프로젝트를 하지 않는 이상 굳이 이렇게 주지 않아도 된다는 포스팅을 본 것같지만, 난 찜찜하므로 1분정도 staleTime을 주어서 데이터가 너무 많이 불러와지는 걸 방지했다.

 

또한 cacheTime은 staleTime과 별개로 cacheTime의 시간이 지나지 않아도 데이터의 상태가 stale 이라면 데이터가 cache된 상태라도 다시 데이터를 호출한다. 그리고 cacheTime은 defaul값인 5분이 지나면 가비지 컬렉터로 수집된다. 그렇기에 cacheTime은 데이터가 처음 불러온 inactive 상태를 기점으로 staleTime이 10분 이상으로 줘도 자동으로 가비지 컬렉터 행으로 간다...

 

그러므로 프로젝트의 깊이와 이 데이터가 얼마나 자주 사용되는지에 따라서 잘 설정해주면 될 것 같다!