React Query를 적용하고 느낀점

1. useQuery

• 캐싱의 이점을 얻어 이전에 패칭한 이력이 있다면 로딩 시간 동안 이전에 패칭한 데이터를 보여줄 수 있기 때문에 UI적으로 이점을 가질 수 있었다.
• 하나의 페이지에서 여러 컴포넌트에서 동시에 같은 api를 호출할 경우 기존의 경우 최상위에서 호출한 후, props로 내려줘야했는데, react query의 경우 동시에 같은 api를 패칭할 경우, 한번만 패칭하므로 api 호출 로직을 최상위로 끌어올릴 필요가 없다. => 데이터가 필요한 곳에서 패칭할 수 있음
• 로딩 상태가 내부에서 관리되어 따로 로딩 상태를 정의해줄 필요가 없다는 장점이 있다. 또한 isLoading, isFetching 두개의 상태가 나뉘어 있어 상황에 맞게 사용할 수 있었다.
• invalidateQueries를 통하여 재호출 로직을 간편하게 구현할 수 있었다.
• useQuery에 대한 로직을 커스텀 훅으로 분리시킬 수 있어(useQuery를 한번더 추상화 시키기 위하여), 뷰와 비즈니스 로직을 분리시킬 수 있다.

2. useMutation

• useMutation함수에 onMutate(api를 호출하기 전), onSuccess(api 호출이 성공한 경우), onError(api 호출이 실패한 경우)의 callback이 들어있어 기존의 try-catch로의 구현을 보다 깔끔하게 구현할 수 있게 되었다.
• useMutation을 커스텀 훅으로 한번더 추상화 시켜, 뷰와 비즈니스 로직을 분리시킬 수 있다.

hook 관리

.
└── hooks
    ├── queries
    ├── mutations
    └── ...

• hooks/queries : useQuery를 감싼 훅을 관리한다
• hooks/mutations : useMutation를 감싼 훅을 관리한다