[Weekly Paper 19] - React Query

✨ 서버 상태와 클라이언트 상태의 차이

• 상태 관리를 하는 데이터는 클라이언트 상태 데이터와 서버 상태 데이터 두 가지로 나눌 수 있음

• 클라이언트 상태 데이터는 내 컴퓨터에서만 사용하는 데이터, 예를 들어 UI state 상태, 유저 입력 값 등이 있고
• 서버 상태 데이터는 뉴스 기사나 게시글 등 서버에서 가져온 데이터가 있음

	클라이언트 상태	서버 상태
위치	클라이언트(브라우저 또는 기기)에 저장된 데이터	서버나 외부 데이터 소스에 저장된 데이터
접근성	저장한 클라이언트만 접근 가능	접근 권한이 있는 모든 클라이언트 접근 가능
데이터 관리	클라이언트에서 관리(예: Redux와 같은 상태 관리 라이브러리 사용)	서버에서 관리(예: 데이터베이스 사용)
지속성	세션 간에 지속성이 유지되거나 유지되지 않을 수 있음	일반적으로 세션 간에 지속성 유지
네트워크 요청	데이터를 가져오거나 업데이트하려면 네트워크 요청이 필요할 수 있음	데이터 접근 또는 업데이트를 위해 네트워크 요청이 필요할 수 있음
보안	클라이언트가 액세스할 수 있고 변조 또는 가로채기의 대상이 될 수 있으므로 보안 수준이 낮을 수 있음	인증 및 암호화로 보호할 수 있으므로 더 안전할 수 있음
성능	네트워크 요청이 필요하지 않기 때문에 서버 상태에 비해 접근하고 업데이트하는 속도가 빠를 수 있음	네트워크 요청이 필요할 수 있으므로 클라이언트 상태에 비해 접근하고 업데이트하는 속도가 느릴 수 있음
확장성	클라이언트 기기의 용량에 제한을 받을 수 있기 때문에 서버 상태보다 확장성이 떨어질 수 있음	전용 서버나 고용량의 데이터 소스로 관리되기 때문에 클라이언트 상태보다 확장성이 더 높을 수 있음
예시	컴포넌트 상태, Redux 상태, 브라우저 쿠키	데이터베이스 레코드, API 응답, 서버 세션 데이터

🍒 React Query가 만들어진 이유

• 클라이언트 상태 데이터를 잘 관리하기 위해서는 react context를 사용하거나 redux, recoil등의 다양한 상태관리 라이브러리를 사용할 수 있음
• 하지만 서버 상태 데이터의 경우 서버에서 데이터를 받아오기 까지 시간이 걸리기 때문에 아래와 같이 다양한 상황을 고려해야함

1. 받아오는 것을 비동기 식으로 구현해야하고
2. 로딩이나 에러처리를 필요로 할 때가 있고
3. 서버 상태 데이터는 가능한 최신상태로 유지되어야함

• 클라이언트 상태를 사용할 때와 달리 위와 같은 에러/로딩/주기적인 업데이트 등 다양한 상황을 고려해야함
  => React Query와 같이 서버 상태 데이터만을 집중적으로 관리하는 라이브러리가 등장!

🍒 React Query를 사용할 때 얻게 되는 이점

• 리액트 쿼리를 사용하면 데이터를 가져오는 과정에서 로딩과 에러처리를 쉽게 구현할 수 있게 여러 값을 제공함
• 또 정해진 시간이나 조건 마다 서버상태를 최신으로 가져오는 작업도 알아서 해줌
• 캐시를 사용해 매번 데이터를 가져올 필요 없이 더 빠르게 유저에게 데이터를 보여주기도 함

• 또 페이지네이션, Infinite Query, Optimistic Update 같은 기능도 손쉽게 구현 가능

💡 Infinite Query

페이지네이션(pagination)과 달리 모든 데이터를 한 번에 불러오지 않고 필요할 때마다 일부씩 불러오는 방식으로,
사용자 경험을 향상시키고, 대규모 데이터에 대한 효율적인 처리를 가능하게 함

ex) 더보기 버튼, 무한 스크롤 등

💡 Optimistic Query

사용자의 요청에 대한 응답을 기다리지 않고, 사용자의 요청에 대한 변경 사항을 즉시 UI에 반영하는 방식으로,
서버로 요청을 보낸 후 서버의 응답을 기다리지 않고, 사용자가 입력한 데이터를 즉시 UI에 반영하여 사용자에게 빠른 피드백을 제공하기 때문에 사용자 경험을 향상시키고, 서버 응답 시간에 따른 대기 시간을 최소화함

ex) 좋아요 버튼과 같이 직관적으로 눌렀는지 아닌지를 나타낼 수 있게 업데이트 되어야하는 경우 누르자마자 일단 눌렀다는 걸 알 수 있는 UI로 변경한 후 요청을 보냄

• 즉, React를 사용하면 비동기 상태를 관리하는 방식을 직접 구현해서 사용해야 했다면 React-query 라이브러리를 함께 사용하면 데이터 캐싱, 비동기 상태, 오류 처리, 사용자 경험 개선에도 도움을 준다!