Tanstack Query

A detailed exploration of implementing Tanstack Query, comparing it with Redux, and sharing practical experiences in data lifecycle management

April 11, 2024

현 상황과 문제점

회사에서는 Angular과 일렉트론을 기반으로 협업 툴을 웹과 앱으로 개발 중입니다. 현재 Redux를 사용하여 상태를 관리하고 있지만, 화면의 복잡도가 증가함에 따라 데이터의 생성과 제거를 관리하는 것이 어려워졌습니다. 각 화면에서 데이터를 생성 및 제거하는 접근 방식은 유지보수가 어려워지고 메모리 관리도 쉽지 않았습니다.

데이터 관리의 새로운 접근

이 문제를 해결하기 위해 데이터 관리를 화면이 아닌 독립적인 계층으로 분리하여 고민해보았습니다. 데이터의 라이프 사이클을 화면이 아닌 자체적인 라이프 사이클로 관리하는 것이 중요하다고 판단했습니다.

Tanstack Query의 소개

그런 다음 Tanstack Query를 알게 되었습니다. 이 라이브러리를 사용하면 해시키를 통해 데이터에 직관적으로 접근할 수 있고, 캐시를 활용하여 불필요한 API 호출을 줄일 수 있습니다. 또한, 컴포넌트 로직을 간소화하고 웹소켓을 효과적으로 관리할 수 있습니다.

만들어보기

Todo 앱을 만들어 보면서 어떻게 활용 할 수 있지 알아보았습니다. (Github repo) 간단한 스펙을 아래와 같습니다.

클라이언 스펙

1. 월 단위로 todo 리스트를 가짐
2. 월 단위로 todo 리스트 뷰 제공
3. 위젯 형태로 여러 월을 동시에 볼 수 있는 뷰 제공

서버 스펙

1. 월 단위 todo 리스트에 대한 웹소켓 제공
2. 단일 todo 수정에 대해서는 웹소켓 제공하지 않음
3. todo 생성, 수정, 삭제에 대한 API 제공

이렇게 구현해본 앱에서는 컴포넌트 계층에서는 데이터 관리에 대한 로직을 최소화하고, Tanstack Query를 통해 데이터의 라이프 사이클을 관리하였습니다. 특히 웹소켓을 통해 실시간으로 데이터를 업데이트하는 부분에서 Tanstack Query를 활용하면 매우 효과적이라는 것을 알 수 있었습니다. 데이터 계층에서 생성과 제거 시점에 자동으로 웹소켓의 room에 join하고 leave하는 로직을 구현하여, 화면에서는 이에 대한 로직을 신경쓰지 않아도 되었습니다.

항상 옳지는 않음

Tanstack Query를 통해 얻을 수 있는 장점과 함께, 우리 앱의 특성에 맞지 않는 기능들을 발견했습니다. 예를 들어 stale time 설정은 자동으로 api를 호출하게 만드는데 이는 우리 앱의 특성에 맞지 않았습니다. 최소한의 api 호출과 웹소켓을 통한 데이터 업데이트를 중점으로 두��야 했기 때문에, 이러한 설정은 오히려 불필요한 api 호출을 유발할 수 있었습니다. 따라서 직접 도입하지는 않았지만, 그 개념을 활용하여 데이터의 라이프 사이클을 관리하는 라이브러리를 만들기로 결정했습니다.

결론과 배운 점

실제로 도입 하지 않았지만, 이러한 과정을 통해 데이터 구조를 설계할 때 확장성과 유지보수성을 고려하는 방법을 배웠습니다. 이는 앱의 성능을 향상시키고 유지보수를 용이하게 만드는 데 큰 도움이 될 것입니다.