😬 React-Query 꼭꼭 씹어먹기

서버상태관리 라이브러리의 등장

---

📌 등장배경

UI/UX의 중요성과 함께 프로덕트 규모가 커지면서 프론트엔드에서 관리해야하는 상태가 많아졌다.

기존에는 서버상태와 클라이언트상태를 구분하지않고 전역상태관리 도구를 통해 관리했다.
이러다보니 전역상태가 저장되어야할 store에 상태관리보단 API통신을 위한 코드로 도배되었다.
이를 해결하기위해 서버상태관리 라이브러리가 등장했다.

대부분의 기존 상태 관리 라이브러리는 클라이언트 상태 작업에는 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다.

TanStack-Query Docs Overview

• 전역상태관리 라이브러리(Redux, MobX...) + 미들웨어(React-Saga, React-Thunk...)를 이용해 서버상태와 클라이언트상태를 한번에 핸들링 ➡️ 복잡도 상승(보일러 플레이트도 상당함), 코드량 증가

• 서버상태관리 라이브러리(React-query, SWR...) 등장으로 서버상태와 클라이언트 상태를 분리하여 관리 ➡️ 복잡도 감소, 코드량 감소

리덕스는 순수함수를 지향해서 비동기처리에는 부적합하기 때문에 미들웨어로 이를 해결한다.
이를 통해 비동기적인 서버상태관리를 수행할 수 있지만 서버상태만을 위한 로직이 비대해진다.
리덕스 자체가 상당한 양의 보일러 플레이트를 요구하기 때문에 코드량이 증가한다.
그리고 이를 각각의 API 마다 반복해야한다.
📚 그림출처

✅ Server state 🆚 Client state

그렇다면 서버 상태와 클라이언트 상태가 뭘까? 뭐 때문에 이 둘을 이원화해서 관리해야될까?

• 서버상태 ➡️ 데이터베이스에 저장되어 여러 사용자 간에 공유되는 동적 데이터
• 클라이언트상태 ➡️ 개별 사용자의 인터페이스와 상호작용에 관련된 데이터

서버상태는 클라이언트상태와 다르게 동적이므로 시간에 따른 데이터의 변화를 트래킹 해야하고 성능최적화를 위해 요청을 최대한 줄여야한다.
즉, 성격이 다른 클라이언트 상태 관리와 서버 상태 관리를 분리함으로써 캐싱를 통한 성능향상, 관리 및 유지보수를 용이하게할 수 있다.

구분	서버 상태	클라이언트 상태
저장 위치	웹서버나 데이터베이스	사용자의 브라우저나 애플리케이션
특징	중앙집중식, 동적, 여러 사용자 간 공유	로컬, 임시, 사용자별 개별적
조작 제약	API 호출을 통한 조회 및 수정(조작에 제약 있음)	제약 없이 자유롭게 조작 가능
데이터 특성	클라이언트 요청에 따라 변경, 공유 데이터	UI 상태 관리에 사용, 사용자 경험과 직결
관리 방법	데이터 캐싱으로 네트워크 요청 최소화, 서버 변경 시 업데이트	useState, Redux, MobX, Context API 등으로 관리
상태 유지	업데이트가 없으면 out-of-date 가능성 있음	항상 최신 상태 유지

✅ RFC 5861

• RFC 5861 문서를 통해 stale-while-revalidate라는 새로운 HTTP 캐싱전략이 대두되었고 이 컨셉을 바탕으로 TanStack-Query(구 React-Query), SWR 등이 탄생 했다.
• 이 전략은 우선적으로 캐시에서 데이터를 반환하고 검증을 위한 요청을 보낸 후 최신데이터로 업데이트하는 과정을 거친다.
• 이를 통해 지속적이고 자동적으로 서버상태가 업데이트 됨으로써 최신상태를 유지할 수 있게 되었다.

  최초 요청 시 캐시가 없을때 : 서버에서 최신 데이터를 가져옴
  캐시가 최신 상태 : 최신 캐시된 데이터를 즉시 받음.
  캐시가 만료된 상태 : 처음에는 만료된 데이터를 받고, 백그라운드에서 최신 데이터를 업데이트

🚨 RFC(Request for Comments) 문서는 "의견을 요청하는 문서"라는 의미로, 국제 인터넷 표준화 기구(IETF)에서 관리하는 기술 표준 ➡️ 모든 인터넷 표준은 RFC로 문서화됨

---

📌 작동원리

query란 문의하다, 질문하다라는 뜻으로 프로그래밍적으로는 DB에 정보를 요청하다라는 뜻으로 해석할 수 있다.
그러므로 TanStack-Query(구 React-Query)라는 이름은 DB에 정보를 요청하는기능을 라이브러리화 해둔것이라고 암시적으로 나타낸다.
작동원리는 아래와 같이 RFC 5861의 컨셉을 따른다.

• Stale-While-Recalidate:
  백그라운드에서 stale response를 revalidate하는 동안 캐시가 가진 stale response를 반환
  StaleTime이 지나기전까진 데이터를 다시 호출하지 않는다(fresh한 상태).
  지속적으로 UI를 제공하기 위해 최신 sever data를 받아올때까지 Stale data를 사용한다.

• StaleTime : 얼마의 시간이 흐른 후에 데이터를 stale(낡은) 취급할것인지

• CacheTime : 메모리에 얼마만큼 있을건지

  Query 상태흐름 (화면에 있다가 사라지는 query)
  
  Query 상태흐름 (화면에 있다가 없다가 좀 더 복잡한 query)

내부적으로는 Context API를 사용한다.
이를 통해 컴포넌트간의 쿼리상태 및 캐쉬데이터를 공유할 수 있다.

---

📌 사용법

🌟 구조분해할당 문법을 사용하면 선언한 변수를 모두사용해야된다.

✅ useQuery

GET 요청에 사용

• Query key: 배열, 쿼리 키에 따라 쿼리 캐싱을 관리(쿼리키가 같으면 다른함수라도 호출 ❌, 쿼리키가 다르면 같은함수라도 호출 ⭕️)
• Query Fn : Promise를 반환하는 함수(API패칭 함수)
• 옵션 : useQuery 기능을 제어

function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then(
        (res) => res.json(),
      ),
  })

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

자세한 내용은 useQuery을 참고

✅ useQueries

데이터 패칭이 한 컴포넌트 내부에서 여러개 실행되어야한다면 useQuery를 병렬로 선언하면 된다.
복수 쿼리에 대한 로딩, 성공, 실패처리를 하나로 관리하고 싶다면 useQueries를 사용하면 된다.

const results = useQueries({
  queries: [
    { queryKey: ['post', 1], queryFn: fetchPost, staleTime: Infinity},
    { queryKey: ['post', 2], queryFn: fetchPost, staleTime: Infinity}
  ]
})

✅ useMutation

POST, PUT, DELETE 요청에 사용

• useQuery와 비슷한 문법이며 선언 후 mutation(변수명).mutate()로 사용한다.

function App() {
  const mutation = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
  })

  return (
    <div>
      {mutation.isLoading ? (
        'Adding todo...'
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
    </div>
  )
}

• onSuccess()에 invalidateQueries() 이용하여 캐시를 무효화하고 최신 데이터를 받아오며 변경사항을 즉시 렌더링 할 수 있다.

onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ['타겟 쿼리키'],
      });
    },

자세한 사항은 useMutation을 참고

이외에도 infinite Queries, suspense, SSR, Optimistic Updates를 제공한다.

---

📚 참고문헌

https://tanstack.com/query/v4/docs/react/overview
https://velog.io/@jhjung3/1-React-Query-Overview
https://velog.io/@hyunjine/Server-State-Client-State https://velog.io/@jkl1545/React-Query
https://velog.io/@jkl1545/React-Query
https://velog.io/@jay/5-minute-react-query-essential
https://velog.io/@jay/10-minute-react-query-concept
https://techblog.woowahan.com/6339/
https://www.youtube.com/watch?v=MArE6Hy371c
https://medium.com/hcleedev/web-react-query-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EB%93%B1%EC%9E%A5-%EB%B0%B0%EA%B2%BD-%EC%9E%A5%EC%A0%90-%EA%B8%B0%EC%B4%88-%EA%B0%9C%EB%85%90-e82a3733036c
https://leego.tistory.com/entry/react-query%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%A0%EA%B9%8C
https://tkdodo.eu/blog/inside-react-query