React Query 기술블로그 1년 후

안녕하세요! 오늘은 제가 작년에 우아한형제들 기술블로그에 작성했던 'Store에서 비동기 통신 분리하기 (feat. React Query)'를 공개한지 딱 1년이 지난 날입니다. 이를 기반으로 올해 2월에 React Query와 관련해 세미나도 했었는데 시간이 참 빠르네요! 오늘은 그 1년 사이 React Query는 어떻게 변했는지 몇 가지 변경점에 대한 글을 좀 써보려고 합니다. 1. react-query는 @tanstack/react-query가 되었습니다. React Query로 런칭한 이 라이브러리는 v4가 되며 어느덧 Tanstack Query 중 React에서 사용하는 일종의 adapter가 되었습니다. core 로직을 모으고 여러가지 FE 라이브러리를 지원하기 시작했는데요! 현재 react-query, solid-query, vue-query를 제공해주고 있습니다. 개인적으론 아직 런칭 전이지만 준비중인 svelte-query가 기대되네요! 2. Query Key는 이제 배열만 지원합니다. v3까지는 Query Key는 string 혹은 array 모두 지원했습니다. 하지만 v4에선 이를 전부 array로 통일했는데요! react query 개발자들의 말에 의하면 키가 string으로 들어와도 내부적으론 배열로 변환해 사용하고 있는 곳이 좀 있었다고 합니다. 이를 API까지 강제하진 않았으나 string과 array 모두 Query Key가 사용되면서 키를 써야할 때 혼란이 좀 있었다고 합니다. 이를 깔끔하게 해결하기 위해 array로 통일했다고 합니다. 뭐 저는 어떤 형식이든 상관없다는 생각이었으므로 앞으로 썼을 때 이점이 있다면 괜찮은 방향이라고 생각합니다. 다만, v3로 string 키를 적극적으로 활용하신 분들(저 포함)이라면 고생 좀 하실거 같아요..ㅎㅎ 파이팅!! 3. status에서 idle 상태가 제거되고 fetchStatus가 새롭게 등장했습니다. 기존 status에 통합된 idle 상태는 사실 success나 fail 상태와 공존하고 있었습니다. Query가 성공하고 실패한 후에도 요청을 보내고 있지 않으면 idle 상태이긴 하나 status는 success 혹은 fail이였습니다. 이 모호한 상태를 구별하기 위해 상태를 두 가지로 나누었고 status는 데이터에 대한 이야기, fetchStatus는 queryFn이 작동중인지 아닌지에 대한 정보를 전달해줍니다. 4. 지원하는 브라우저의 버전이 높아졌습니다. React Query v4는 모던 브라우저에 최적화하기 위해 지원하는 브라우저 버전을 올렸다고 합니다. 성능과 적은 번들링 사이즈를 위함이라고 하네요. Chrome >= 73, Firefox >= 78, Edge >= 79, Safari >= 12.0, iOS >= 12.0, opera >= 53 요 정도라고 합니다! 레거시 버전 지원을 하는 서비스 단 개발자분들은 주의하셔야할 거 같아요! (저도요......) 5. Query Filter가 boolean에서 리터럴 타입들의 union으로 변경되었습니다. 기존 active: boolean, inactive: boolean 방식은 이를 잘못 조합했다간 불가능한 상태가 될 수도 있었습니다. active 상태과 inactive 상태 모두를 가져오고 싶으면 둘 다 true인데 그러면 이게 and 조건으로 묶일텐데 이상한 상황이었죠..? 이를 v4에서 type이란 필드로 개선했습니다. 비슷하게 refetchActive, refetchInactive 옵션도 refetchType으로 변경되었으니 기존에 active, inactive 상태를 잘 활용하셨던 분들이라면 굉장히 도움이 많이 되실 것 같습니다! 6. setQueryData 시 onSuccess를 요청하지 않도록 변경되었습니다. 기존에 setQueryData를 onSuccess에서 실행하면 무한 루프가 돈다던지 다른 함수에서 요청해도 의도치 않게 onSuccess가 실행되는 불편한 상황이 있었습니다. v4에서는 이를 개선했고 이제 onSuccess는 onError와 onSettled와 동일하게 수행중인 request에 묶입니다. 예전에는 data 변화를 감지해서 해야할 일을 onSuccess에서 통합적으로 했다면 이제는 외부 setQueryData가 발생시키는 변화를 포함한 request와 상관없는 side effect는 onSuccess가 아닌 useEffect에서 하는게 맞고 원래도 그게 맞지 않았나 싶습니다! 7. 1년 사이 새롭게 지원하는 것들 - ESM 지원 - React 18 지원 - 오프라인 모드 지원 - mutation 쿼리 가비지 컬렉팅 - 여러 Provider에 대한 커스텀 context 지원 - 이외에도 아주 많은 기타 등등 오늘은 React Query에 지난 1년간 어떤 변화가 있었는지에 대해 조금만(아닌가요..? ㅎㅎ) 다루어보았습니다. v4가 좀 더 어떻게 바뀌었는지 자세하게 궁금하시면 마이그레이션 가이드를 확인해보시면 좋을거 같아요. 문서가 정말 잘되어있거든요! https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4 SNS 치고 글이 좀 길었죠? 요정도로 쓰고 ㅋㅋㅋㅋ 앞으로도 React Query 관련해서도 가끔 글 공유드릴게요..!