안녕하세요? 카페인 팀 FE에서 상태관리 라이브러리를 어떻게 해야할 지 고민 끝에 서드파티 라이브러리가 필요하게 되어 글을 작성하게됐습니다.

서버 상태와 클라이언트 상태의 구분

서버상태와 UI상태를 이해하는 것은 굉장히 중요했습니다. 데이터를 송수신하는 작업과 상태를 관리하는 작업은 유기적으로 동작해야했습니다. 기존에는 상태와 데이터 송수신 과정을 분리해서 생각했다면, 현대의 react 프로젝트들은 서버와 동기화를 해야할 상태와 그렇지 않은 상태로 분리해서 생각해야 합니다.

React에서 어떤 데이터를 상태로 다뤄야 하는가에 대해서는 여러 의견이 나올 수 있다고 생각하지만 상태가 특성을 가지고 있는가에 대해서는 대부분 특성이 있다고 동의할 것입니다. 이 글에서는 React의 상태란 무엇인가?에 대해서 다루지 않고 React의 상태의 특성에 대해서만 언급을 하려고 합니다.

상태의 특성으로는 크게 두 가지가 있습니다.

클라이언트 상태

클라이언트 상태는 컴포넌트들 간에 어떤 값을 공유해야하면서 오로지 React DOM 내부에서만 CRUD가 일어나는 상태를 의미합니다. 이 상태들은 React DOM 외부 세계와 크게 관련이 없으며 동기적으로 반영됩니다. 대표적으로는 UI를 조작하는 상태들이 될 것입니다. 클라이언트 상태들은 대부분 장기적으로 유지될 필요가 없기에 화면을 벗어나거나 세션이 끊기는 경우 사라져도 괜찮은 경우가 많습니다.

서버 상태

서버 상태는 React의 바깥 세상(서버)에 존재하는 데이터가 React의 상태 관리와 비동기적으로 동기화 된 것을 의미합니다. 어떤 상태가 외부에서 관리되는 데이터와 반드시 연동되어야 한다면 이는 곧 서버 상태임을 의미합니다. React의 상태를 CRUD 하는 것 뿐만 아닌, 서버에서도 항상 같은 일이 일어나야 합니다. 서버 상태는 장기적으로 유지되어야 하며, 세션에서 벗어나더라도 서버로 부터 복구를 해야 합니다.

기존의 상태 관리 라이브러리들은 리액트의 전역에서 상태를 조작하는 것에 특화되어있고, 비동기적인 상태 관리도 지원하여 서버와의 통신이 가능합니다. 하지만 대부분의 라이브러리들은 클라이언트 상태를 조작하는 것에 초점이 맞춰져있습니다.

더군다나 클라이언트 상태와 서버 상태가 하는 일이 명확하게 다른 상황에서 이 둘을 한 곳에서 관리하는 것 보다는 완벽하게 분리하는 것이 더 나을 것입니다. 따라서 서버 상태를 관리하는 것에 중점을 둔 라이브러리들이 등장하였습니다. 대표적인 라이브러리로는 RTK Query, Tanstack Query, SWR 등이 있습니다.

왜 Tanstack Query였나?

vs RTK Query

RTK Query는 RTK를 반드시 사용해야 하는 것은 아니지만 RTK를 타겟으로 나온 서버 상태 관리 라이브러리입니다. 카페인 팀에서는 클라이언트 상태를 관리하기 위해 라이브러리를 사용하지 않습니다. 더욱이 Redux의 복잡한 코드 구성과 방대한 보일러 플레이트는 매력적이지 않았습니다. tanstack query에서는 무한 데이터 페칭을 지원하기 위해 Infinite Queries가 있지만 RTK Query는 그렇지 않았습니다.

vs SWR

SWR도 하나의 좋은 선택지였지만, 전역 상태 관리 라이브러리들이 범용적으로 지원하는 셀렉터 기능을 지원하지 않았습니다. 또, 가비지 컬렉터의 부재도 아쉬웠습니다. 재요청을 하기 위한 stale time 설정이나 쿼리 취소 기능이 없는 점도 매력적이지 않았습니다.

카페인 팀에서 하려는 일은요…

저희 카페인 팀의 프로젝트는 실시간 전기자동차 충전소 지도 및 사용 통계 조회 서비스 로 지도 기반의 프로젝트입니다. 서버 상태를 적극적으로 다뤄야 하는 상황에서 Tanstack Query를 서버 상태 관리 라이브러리로 선정하게 됐습니다.

메인 기능 중 Tanstack Query가 핵심으로 사용될 것 같은 기능은 다음과 같습니다.

• 지도에서 충전소 조회
  • 현재 접속한 클라이언트에 렌더링 된 지도 화면(디스플레이)의 크기에 따른 GPS좌표를 알아내어 서버로 부터 충전소 정보를 수신 받습니다. 즉, 화면이 이동하게 되면 사용자가 바라보고 있는 영역이 변하므로 새로운 요청을 보내게 됩니다.
  • 서버에서 수신한 충전소 정보는 실시간 사용 현황도 반영되어있으므로 주기적인 업데이트도 필요합니다.
  • 빈번한 데이터의 변화가 필요하며 그만큼 통신 실패 등 에러가 발생할 가능성도 많아지게 됩니다.
  • 사용자의 빠른 지도 이동이 발생하는 경우를 대응할 수 있어야 합니다.
• 전국 충전소 검색기
  • 원하는 충전소 검색을 하는 기능을 지원합니다. 전국 단위로 검색 결과를 수신하는 기능입니다.
  • 네이버와 구글 검색창 처럼 사용자가 input 창에 검색어를 입력할 때 마다 검색 결과가 동적으로 표시되어야 합니다.
  • 빈번한 데이터의 변화가 필요하고, 사용자의 빠른 타이핑으로 인해 잦은 검색이 발생하는 경우를 대응할 수 있어야 합니다.
  • 이를 위해 데이터를 캐싱할 필요도 있다고 생각합니다.

프로젝트에서 클라이언트와 서버와의 통신이 어쩌다 한번 일어난다면 굳이 라이브러리가 필요가 없겠지만, 서버의 데이터 전적으로 의존해야 하는 저희 프로젝트 특성상 Tanstack Query의 여러 기능이 생산성에 많은 도움이 될 것으로 기대합니다.