Jotai의 TanStack Query를 설정해보고, 성능 개선 확인해보기 (#79)

성능 개선이 이루어지기 전의 상태를 캡쳐하고(React Query가 적용되어 있는 상태), Jotai의 TanStack Query를 통해 비동기 처리를 리팩토링 해본 뒤, 이를 기반으로 효율적 성능 향상과 더 깔끔한 코드가 만들어졌는 지에 대해 평가해보고 분석한다.

• Jotai를 이용한 캐싱 정책과 React Query는 각각 어떤 특징을 가지고 있을까? 일단은 이에 대해서 면밀하게 생각해 볼 필요가 있었다.
• 분석을 해본 결과, 애초에 Jotai 내부에서 TanStack Query를 구현할 수 있었다. TanStack Query는 React Query의 최신 버전을 통칭하는 말로 쓰인다. 그리고 Jotai에서 기본적으로 제공하는 TanStack Query Tool을 제공하고 있으며, 이 Tool을 이용해서 React Query와 Jotai를 통합해서 사용할 수 있다는 강력한 장점이 존재한다.

현재 React Query를 부분적으로 적용하고는 있지만, 아직 적용이 되지 않은 부분이 존재하며, 이 부분을 Jotai의 tanstack-query를 통해 적용해보고자 할 계획이다.

<적용 전>

• 코드를 변경하기 전의 현재 상태에 대해 측정해보고, 이를 스크린샷으로 기록해본다.
• jotai의 TanStack Query에 대한 내용을 학습해본다.

<적용 과정>

• atomsWithQuery를 적용하여 jotai 코드 리팩토링하기

<적용 후>

코드를 변경하기 전의 상태 보고서 측정하기

네트워크 상태 보고서 (적용 전 - 제한 없음, 초기 로딩 상태)

• 약 2.28초만에 완료가 되었음
• DOMContentLoaded 시간: 146 밀리초
• 로드되는 시간: 257 밀리초

네트워크 상태 보고서 (적용 전 - 빠른 3G, 초기 로딩 상태)

• 약 3.36초만에 완료가 되었음
• DOMContentLoaded 시간: 1.22초
• 로드되는 시간: 257 밀리초

• 이리저리 조사해 본 결과 React Query의 useQuery를 활용한 ‘atomsWithQuery’와 useMutation을 활용한 ‘atomsWithMutation’을 통해 현재 프로젝트에서 데이터를 생성/업데이트/삭제할 경우 이를 적용할 수 있을 것이라고 판단되었다.

• **서버 데이터와 클라이언트 데이터를 ‘분리’**해줄 수 있는 역할을 할 수 있다. 만약에 React-Query를 사용하지 않게 된다면 서버에서는 이미 패치된 데이터를 사용하고 있는데, 클라이언트에서는 패치되기 이전의 데이터를 사용할 가능성이 존재한다 참고 자료
• React-Query를 사용하게 되면 서버 데이터와 클라이언트 데이터를 ‘분리할 수 있다’.
• ‘캐싱’이라는 강력한 기능을 사용할 수 있게 된다.
• get을 한 데이터에 update를 진행하게 되면 자동으로 다시 get을 진행할 수 있게 된다. 만약에 데이터가 오래되었다고 판단이 된다면 **get ( invalidateQueries )**를 통해 데이터를 요청하면 된다.

• useQuery가 GET을 담당한다면, useMutation은 POST, PUT, DELETE를 담당한다.
• 그런데, jotai에서는 이를 ‘****atomsWithMutation'****을 사용해서 적용할 수 있다. 이미 TanStack Query도 atomsWithMutation 내부에 들어있기 때문에 크게 상관은 없을 것이라고 생각했다.
• 참고로, 프로젝트에서는 쓰이지 않겠지만, **[atomsWithInfiniteQuery](https://jotai.org/docs/integrations/query#) 를 통해 무한 스크롤링을 할 때 사용하면 더 나은 성능을 발휘할 수 있을 것 같다.

• 우리 프로젝트에서 어떤 부분을 걷어내서 atomsWithQuery나 atomsWithMutation을 적용시킬 수 있을까? 그리고 그 이유는 무엇일까?

• 현재, atom 디렉터리에는 여러 종류의 Atom들이 들어있다. 이들 중에서는 비동기 처리를 통해 초기화를 시켜주는 Atom 또한 존재한다. atomsWithQuery나 atomsWithMutation을 이용하게 되면 ‘비동기 처리와 상태값 초기화를 한 번에 해줄 수 있다’는 장점이 존재한다. 그리고 코드를 통해 이를 구현하고자 한다.

• Jotai에서 제공하는 atomsWithQuery, atomsWithInfiniteQuery, atomsWithMutation은 React Query를 사용할 때 확장적으로 사용할 수 있다는 점을 나중에야 알았다. 이는 다시 말해, React-Query를 사용하지 않고 다음과 같은 기능을 사용할 수는 없다.
  • 그랬기에 현재 React Query를 유일하게 사용하고 있는 곳에서 실험을 해보기 위해 새롭게 branch를 파고, atomsWithQuery를 적용하고자 했으나, 커스텀 훅으로 둘러싸여 있었고, 의존성이 얼기설기 설켜있었기 때문에 이를 분리하는 것이 굉장히 어려움 → → 들이는 노력에 비해서 소득이 없을 거 같아 일단 보류 중