리액트 쿼리 쵝오
setup부터 엄청 쉽다.
걍 설치하고
queryclient 만들어주고 전체적으로
provider로 감싸주면 준비 끝.
그다음에는 또 우리가 흔히 통신을 위해 쓰는 fetch기능을 제공해준다. 아니 제공은 아니고 훅으로 쓸수있게 해줌.
에.. 정확히 말하면 fetch를 인자로 쓰는것 같다.
props값으로는 여러가지 값을 제공해주는것 같당.
간단히 몇가지 알아보면
data, error, isLoading...
기존에는 setState를 사용하거나 리덕스로 값을 넘겨주는 형식으로 데이터를 가져다썼고, 또 뭐지 async await도 사용해줘야했는데
이제 이럴필요가 없단말이당 대박 아닌가 이거
const {isLoading, data...이것저것} = useQuery(여긴 키값, 여긴 fetcher)
이런 형태로 사용하면 된다.
중간중간 리덕스의 리듀서처럼 값을 조작해주려면 mutation?이라는걸 쓰면 되는듯
리액트 쿼리를 보면 key값을 사용하는데 왜 쓰냐..면? 리액트 쿼리는 캐싱(caching)을 사용하는데
여기서 캐싱은 데이터가 한번 fetch가 되면, 더이상 fetch를 하지않겠다 라는걸 의미한다. 쉽게 설명하면 두번 안하겠다 라는말. 에.. 그러니까 우리가 어떤 작업을 할때, 예를들면. 리액트상에서 리액트 라이프스타일이 마운트 될때마다 fetch로 데이터를 요구할때가 있을거다. 이런짓 안하겠다는말.
내가 일 시작하기 극초반에 진짜 암것도 모를때 했던 실수가 저건데.. 뭐 초짜라 그럴수도 있다고 지금은 생각하지만.. 값을 뭐 매번 불러오니 앱 기능적인면이나 내부적으로도 문제가 많았다..(앱이 중지되거나 튕겨버릴수도 있는 그런.. 끔찍한..) 지금은 대대적인 리팩토링중이지만.. 할튼 리액트 쿼리의 캐싱은 정말 좋은 기능!
어쨌든. fetch라든가 뭐 axios라든가 받아온 data는 리액트쿼리상의 캐시로 갈거고,우리가 명명한 키값으로 이것저것 가능할거다.
앱상에서 작업할때 또 좋은점이 있는데,
다른 페이지, 또는 화면단에서도 써야할때가 있는경우가 많을거다. 이때도 리액트쿼리로 받아온 값은 내가 명명한 키값으로 불러오면 데이터값을 또 요청하지않고 마치 리덕스처럼 가져다 쓸수있다는 장점이 있다(툴킷이 나와서 겁나 간단해져버렸지만, 그럼에도 불구하고 리액트 쿼리는 진짜 쓰기쉽다. 리덕스 초반에는 진짜.. 불변성도 못쓰고 후...). 아 물론 웹에서도 좋고.
리액트 쿼리 장점을 꼽자면 이런게 있지않을까 싶다.
1. api에 대한 사용료를 내고있다면 한번만 하고싶을거고 여러번 하기싫은건 당연
2. 서버를 가지고 있다면 fetch를 매번 마운트되거나 화면켤때마다 하게 하고싶지는 않을것이당.(기능저하 문제랄까)
캐싱에 대해 좀 알아보다가. 걍 신기한걸 발견해서.. 일할때 써먹어야징.
native screenoptions기능중에는 unmountonblur라는것이 있는데 다른 탭바로 갔다가 다시 돌아오면 새로고침? 되는 기능같다.
웹같은 경우는 애초에 라우터로 다른페이지로 넘어가서
렌더링이 자동으로 되게 해줬는데,..
초기에 앱만들때는 이런기능이 있는지 모르고,..
뻘짓했던것같은 기억이.. 주마등처럼...
줸장.. 공식문서 좀 잘 읽어야겠다.. 대충말고..
