react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query

간단 소개

파트너스 레거시 코드 리팩토링을 통해 API 로직을 분리하고 React-Query를 도입하여 데이터 처리 효율성을 개선했습니다.

AI Summary

API 로직 분리 및 클래스형 API 결정
- 덕스 패턴으로 관리되던 Redux 스토어에서 API 엔드포인트를 분리하여 관리 필요성을 느낌.
- 클래스형 API는 직관성이 높지만, 함수형 API는 성능상 이점이 있어 클래스형으로 결정.
- 기존 액션 네임을 API 명으로 사용하여 리팩토링 시 혼란을 줄임.
React Hooks 및 React-Query 도입
- connect로 작성된 HOC 대신 useSelector를 사용하여 불필요한 props drilling을 제거.
- 전역에서 사용되지 않던 값들을 React-Query로 리팩토링하여 불필요한 스토어 사용을 줄임.
- 데이터 호출, 에러 처리, 데이터 가공 과정을 분리하여 코드 가독성 및 유지보수성을 향상.
React-Query를 통한 효율적인 데이터 처리
- useState를 사용한 pending 처리 대신 isLoading을 사용하여 간편하게 상태 관리.
- 데이터 호출, 에러 및 상태 처리, 데이터 가공의 과정을 분리하여 각 기능별 명확성을 확보.