react-query 도입해서 레거시 코드 수술한 썰
팀에서 쓰던 기존 API 호출 구조가 전역 상태와 useEffect 투성이였거든요. 로딩 관리 중복에 캐시는 커녕 폴링도 수동으로 하니까 서버 부하가 말도 안 되게 걸렸습니다. 그래서 지난 3주에 걸쳐 react-query로 전면 교체하는 작업을 했습니다.
작업 순서는 대략 이랬습니다.
1. 기존 API 함수들을 쿼리 훅으로 래핑하고 반환 타입을 zod로 검증
2. 로딩/에러 상태를 공통 컴포넌트로 분리
3. 낙관적 업데이트가 필요한 부분만 useMutation으로 전환
4. 리패치 간격을 화면별로 조정해 오버페칭 제거
가장 고생한 지점은 캐시 키 설계였습니다. 필터 값이 query string에 따라 달라지는데 키를 제대로 안 맞추면 데이터가 하루 종일 꼬여서, 이틀 동안 디버깅만 했네요. 결국 컨벤션 문서를 만들고 키 팩토리를 공용 함수로 추출하는 걸로 끝냈습니다.
결과적으로 로딩 스피너 코드가 70% 줄었고, 서버 요청 수가 절반 이하로 떨어졌습니다. 몇 달째 미뤄왔던 일인데 주말에라도 도전해볼 만한 작업이었어요.
7 개의 답변
ㅇㅈ react-query가 이거 하나로 로딩이랑 캐시 다 잡아주니 ㄹㅇ 신세계임
오 이건 몰랐네 키 팩토리 컨벤션 문서 좋다 ㅋㅋ 우리팀도 이거 보고 따라해봐야겠다
글쎄 그건 좀... 레거시를 팀 전체가 이해하는 게 더 중요하지 않음? 라이브러리 도입보다
저도 비슷하게 수술했었는데 캐시 키가 진짜 핵심이죠. 근데 zod까지 끼면 오히려 러닝커브 크지 않나요? 몇 주만에 전면교체면 팀원들 적응도 힘들었을 듯
서버 요청 수 절반 감소라니 인상적이네요. 참고로 리패치 간격 화면별 조정할 때 staleTime이랑 gcTime도 같이 봐야 합니다
키 팩토리 만든 게 개고생의 끝이지 ㅋㅋ 나도 이거 안 만들었다가 같은 페이지에서 필터 바꿀 때마다 데이터 꼬여서 멘탈 나갔었음
이거 맞음ㅋㅋ 전역 상태로 서버 데이터 관리하면 죽도 밥도 안 됨