2021/10/20 : 모든 프로젝트에서 react-query 제거

며칠전에는 다라쓰의 댓글모듈 프로젝트에서 react-query를 제거했었는데요.

오늘은 다라쓰의 관리자 페이지 프로젝트에서 react-query를 제거했습니다.

 

인터페이스를 크게 다르지 않게 했기 때문에, 컴파일 오류없이 마이그레이션하는것은 쉬웠지만, 여기저기서 버그가 나왔었습니다.

 

예를 들어서, react-query는 기본적으로 데이터를 캐싱합니다.

하지만 저는 react-query를 사용하면서 캐싱으로 제가 원하는 대로 동작하지 않았던 경험때문에 캐싱기능을 일부러 제가 만든 유틸에 넣지 않았습니다.

그러다보니, 매번 페이지에 접속할때마다 fetching이 일어났고 화면의 깜빡거림이 있었습니다.

fetching자체는 브라우저 자체에서 캐싱이되어서 그런지, 한번 fetching이후에는 빠르게 데이터를 가져왔습니다.

하지만 isLoading, isSuccess를 플래그를 사용하여 Loading UI를 보여주고 있었는데 이것이 깜빡거림의 원인이었습니다.

 

심지어 fetching이 아주 빠르게 일어나서 isLoading이 아주 잠깐 동안 생성되는데, 너무 짧게 깜빡거려서 UX를 해쳤습니다.'

그래서 아예 Loading UI를 많이 제거하여, 깜빡거림이 덜 하도록 하였습니다.

하지만, 초기 UI가 보여지고 데이터가 반영된 UI가 렌더링되면서 UI들이 꿈틀대는것은 잡지못했습니다.

이래서 SSR를 쓰는것인지에 대한 생각도 했습니다.

이것을 어느정도 해결하기 위해서 isLoading, isSuccess가 아닌 새로운 플래그가 필요함을 깨달았습니다.

바로 isFetched인데요. 요청이 1번이라도 갔다온 상태인지를 표현합니다.

실제로 react-query에도 비슷한게 있는데요. 그때는 용도를 몰랐었는데,

 

직접 라이브러리를 제거하고 대체하다보니 그 라이브러리가 왜 그렇게 구현되어있었는지 깨닫는 좋은 기회가 되었습니다.

 

반대로, react-query에서 사용하던 기능을 사용하지 않았는데도 동작이 잘되는 부분도 있었습니다.

댓글관리에서 댓글들은 5개씩 페이지네이션이 적용되어있었는데요, 다음 또는 이전 페이지의 정보를 미리 가져오기 위해서, react-query의 prefetch 메서드를 사용하고 있었습니다.

 

하지만, 제가 커스텀한 react-query에는 prefetch기능이 없었기 때문에, 필요하다면 추가하려고 했습니다.

하지만, 다음페이지로 이동할때 fetching하는 속도가 빨라서 전혀 이상없이 동작을 했습니다.

 

그래서 prefetching 기능을 구현하지 않고 마이그레이션을 했습니다.

 

지금까지 해보니까 라이브러리를 제거하니, 로직을 내 통제에 따라서 짤 수 있어서 너무 편했습니다.

또한, 얻는것도 굉장히 많았습니다.

이왕이렇게 react-query를 대체한김에, 아예 npm에 배포하여, 제가 필요한 기능들을 커스텀해가면서 사용할 수 있도록 라이브러리화를 해야겠습니다.

 

 

 

https://github.com/woowacourse-teams/2021-darass/pull/748

[FE][공통] 관리자페이지에서 react-query 제거 및 버그 수정 by zereight · Pull Request #748 · woowacourse-teams