tanstack query(react) 의 개요를 찾아보다가, 이 tanstack-query 가 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리이며 클라이언트 상태과 서버 상태를 명확히 구분하기 위해서 만들어졌다는 내용의 글을 읽었습니다.
클라이언트 상태는 평소에 React에서 관리하고 사용하는 ‘state’ 의 개념으로 이해하면 될 것 같은데, 서버 상태는 정확히 무엇을 의미하는 것인지 궁금해졌습니다.
이번 글에서는 클라이언트 상태와 서버 상태를 비교하며 차이에 대해 다루어볼게요.
개인적으로는 ‘서버 상태’ 라는 단어가 익숙하지 않았을 뿐이지, 새로운 개념은 아니었어요.
다만, 클라이언트 상태와 서버 상태는 완전히 다른 개념이므로 정확히 이해할 필요가 있습니다.
클라이언트 상태란?
클라이언트 상태는 우리가 흔히 React에서 다루는 상태값을 의미합니다.
예를 들어서 사이드바 메뉴가 열려있는지 여부를 나타내는 데이터, 회원가입 폼에 현재 입력되어있는 데이터 등이 해당할 수 있겠죠.
이러한 데이터들은 사용자가 사용하고 있는 그 브라우저 세션에서만 필요한 데이터들이지, 다른 사용자나 브라우저에 공유될 필요가 없는 데이터들이에요.
또한 페이지를 새로고침하면 클라이언트 상태들은 초기화가 된다는 특징이 있습니다.
서버 상태란?
서버 상태는 서버로부터 가져온 데이터를 의미합니다.
예를 들어, 마이페이지에서 보여지는 사용자의 정보, 사람들이 올린 게시물의 내용 등이 해당합니다.
이러한 데이터들은 다른 여러 사용자들도 접근해서 볼 수 있고, 또한 변경될 수도 있어요.
예를 들어, 다른 사용자가 좋아요를 추가하면 내가 보고 있던 게시물의 좋아요 수가 즉시 증가해야 합니다.
서버 상태를 관리하는 것은 신경써야 할 요소가 많은 작업입니다.
사용자가 보고 있는 데이터가 최신 상태인지도 확인해야하고, 최신 데이터가 필요한 경우 네트워크 재요청을 하기도 해야하며, 똑같은 요청을 반복하지 않기 위해서 캐싱을 고려하기도 해야해요.
이렇게 고려해야할 요소들이 꽤 많기 때문에 Tanstack query와 같은 서버 상태 관리 도구들이 등장했습니다.
이 도구들은 데이터 캐싱, 주기적으로 재검증하는 기능, 에러 재시도와 같은 기능들을 보다 편하게 사용할 수 있게 해줍니다.
예시로 이해하기
좀 더 구체적인 예시를 ‘SNS’ 프로젝트로 들어보겠습니다.
만약 SNS 서비스에 게시글을 작성한다고 가정해볼게요.
사용자는 게시글을 작성하면서 게시물의 내용과 해시태그를 입력해야할 것입니다.
이 때 이러한 데이터들은 클라이언트 상태로 관리될 수 있습니다.
Zustand와 같은 라이브러리를 사용하거나, React의 자체적인 useState을 사용할 수 있을 것입니다.
반면에, 다른 사람들이 올린 게시물의 목록 데이터를 불러오거나 특정 게시물의 좋아요 수와 공유 수에 대한 데이터들은 서버 상태입니다.
서비스의 백엔드 데이터베이스에서 관련 데이터들을 요청해서 받아오고, 그것을 사용자에게 렌더링해야합니다.
이러한 데이터들은 Tanstack Query를 이용해서 효율적으로 관리할 수 있을 것입니다.
만약 이러한 서버 상태들을 zustand에서 모두 관리하려고 하면 어떻게 될까요?
캐싱, 재검증, 에러 처리 등을 모두 직접 구현해야할 것입니다.
물론 직접 구현할 수는 있겠지만 많은 보일러 플레이트 코드가 필요하고, 비효율적일 수 있습니다.
현대 프론트엔드에서의 상태 구분
특히 Tanstack Query가 등장하고 난 이후, 클라이언트 상태와 서버 상태의 구분이 더욱 명확해졌습니다.
예를 들어, 데이터를 가져오는 동안 로딩 상태를 보여주거나, 에러가 발생했을 때 대처할 로직을 작성하거나, 오래된 데이터를 최신 데이터로 업데이트 해주는 등의 작업들을 몇 줄의 코드로 비교적 쉽게 처리할 수 있게 되었죠.
이러한 도구들이 등장하면서 개발의 편의성 또한 높아졌을 뿐아니라, 사람들이 상태 관리에 대해서 바라보는 관점 자체도 변화시키며 현대 프론트엔드 개발의 새로운 기준을 만들고 있는 것 같네요!
ref:
https://github.com/ssi02014/react-query-tutorial?tab=readme-ov-file#onsuccess-onerror-onsettled
https://tanstack.com/query/latest/docs/framework/react/overview#overview
