[React-Query] 프론트엔드 개발 생산성 향상1

얼마 전 카카오 프론트엔드 개발블로그를 보다가 내가 겪고 있는 불편함을 해결한 사례가 있어서 자세히 보게 되었다.

https://fe-developers.kakaoent.com/2022/221127-api-layer/

`API 언제 나오나요?` 로 부터 독립하기

'API 언제 나오나요?' 너무나도 익숙한 말인데..ㅋㅋ 카카오 개발자들도 똑같은 문제를 겪고 있었다니!

위 블로그를 참고해서 나의 문제를 해결해보려고 한다.

위 사례에서는 리덕스툴킷을 사용해서 문제를 해결했지만 나는 리액트쿼리를 사용하고 있기 때문에 리액트쿼리의 select 옵션을 통해

비슷한 기능을 구현할 수 있을 것이라고 생각했다.

쿼리 함수에서 반환하는 데이터를 변형하거나 선택할 수 있는 옵션이다. 

이 옵션을 통해 컴포넌트를 만들면서 mocking 했던 이쁜 모양의 데이터 형식으로 변형해서 내보내 줄 수 있다면

UI컴포넌트 리팩토링 없이 api만 연결해주면 된다!

예를 들면 나는 왼쪽에 있는 것처럼 심플하고 아름다운 모양의 mock data를 만들어서 UI컴포넌트 작업을 마쳤는데

실제 api데이터가 왼쪽처럼 들어오면 거의 리팩토링을 해야 한다.

심지어 key이름까지 다르다면 다시 UI컴포넌트에 바인딩되어있는 키를 하나씩 맞춰줘야 한다.

select옵션 안에서 오른쪽의 데이터를 왼쪽의 모양으로 만들어보자.

api에서 가져온 데이터를 data라는 매개변수로 받고

extractInfinityDataFromDeep() 함수에 인자로 전달해서 콘텐츠만 가져오고

배열 내 객체들의 키이름을 바꿀 수 있는 convertKeyNameInArray 함수를 사용해서 내가 원하는 키 이름으로 바꿔준다.

이렇게 해주면 newData가 바로 왼쪽에 있는 mock data와 같은 모양의 배열이 된다.

newData를 반환해서 UI컴포넌트는 변경 없이 그대로 사용하면 된다.

 

여기서 조금 문제가 발생했는데, 이상한 타입에러가 발생했다.

newData를 분명히 배열로 만들어서 반환했는데, length와 map을 사용할 수 없다.

분명히 배열이 맞는데...

타입스크립트 에러를 잘 보면 newData의 타입이 useInfiniteQuery의 세 번째 제네릭 타입으로 지정한 반환값인

SellerActivityAlarmOutputData[] 가 아니라

InfiniteData<SellerActivityAlarmOutputData[]>라고 나온다.

useIntiniteQuery를 사용해서 반환한 데이터는 타입이 항상 InfiniteData<T>으로 나간다.

 

아래 discussions를 보면

useInfiniteQuery의 select로 반환하는 모든 것은 InfiniteData<T>으로 랩핑 되고 이것을 재정의할 방법이 없다는 것이다!

https://github.com/TanStack/query/discussions/1410

Select on infinite query can't return a different type · Discussion #1410 · TanStack/query

그래서 이 InfiniteData의 타입지정을 살펴보면..

이렇게 되어있다. 내가 만들어준 배열의 타입이 <TData>에 들어가 있으니 

newData만 달랑 반환하는 게 아니라 pages:newData로 반환하면 newData의 타입이 배열이 된다

이렇게 반환해주면 타입문제없이 newData.pages.map() 혹은 newData.pages.length를 사용할 수 있다.

아래는 TanStack 깃헙의 이슈인데 위 내용이 정리되어 있다.

https://github.com/TanStack/query/issues/3065

TypeScript: Selectors for inifinite query less expressive · Issue #3065 · TanStack/query

이로써 프론트엔드 작업기간을 적어도 반나절은 벌었다.

이다음에는 MSW(Mock Service Worker)를 사용해서 비동기 작업까지 mocking 해서 작업기간 하루 이상 벌어보자!