React Query란?

• 서버 데이터 캐싱, 동기화, 업데이트를 도와주는 React 라이브러리
• 클라이언트 상태 관리가 아닌 서버 데이터 관리를 위해 등장
• 전역 상태를 건드리지 않고 어플리케이션에서 데이터를 가져오고 업데이트할 수 있다.

데이터 캐싱

• 데이터를 fetching해온 후 데이터를 캐싱
• 데이터가 stale하다고 판단될 때 데이터를 refetching
• 서버 데이터를 fetching해서 데이터를 캐싱한 후 서버의 데이터가 변경되면 사용자는 잘못된 데이터를 인식하지 않을까
  → React-Query는 브라우저에 포커스가 들어왔을 경우, 새로 마운트가 되었을 경우, 네트워크가 끊어졌다 연결된 경우 데이터를 refetching
  → 사용자가 화면을 볼 때 최신의 데이터를 바라볼 수 있다

Client 데이터와 Server 데이터의 분리

• client 전역 상태 라이브러리(Redux, Recoil) 등과 server 데이터를 분리
• 서버에서 데이터를 가져오지 않고 서버에 데이터를 보낼 필요가 없는 client 데이터를 분리

데이터 패칭 상태

• isLoading, error 등으로 데이터 패칭 상태 확인 가능

사용하기

useQuery

useQuery Hook으로 간단하게 사용 가능하다.

function func () {
  const { isLoading, isError, data, error } = useQuery(['state', text], () => doSomething(text));
  
  if (isLoading) {
    return <div>loading...</div>
  }
  if (isError) {
    return <div>Error : {error.message}</div>
  }
  
  return (
    <div>
      {data.map(some => (
        <p key={some.id}>{some.text}</p>
      ))}
    </div>
  )
}

• GET 요청으로 서버의 데이터를 조회할때 사용
• useQuery()는 두 개의 인자를 받는데 첫 번째 인자는 unique key, 두 번째 인자는 Promise를 리턴하는 함수이다.
• unique key는 보통 배열의 형태로 들어가며 쿼리의 이름을 나타내는 문자와 함수의 인자로 쓰이는 값을 넣는다고 한다. 해당 key값으로 데이터를 캐싱한다.
• Promise를 리턴하는 함수는 말 그대로 원하는 비동기 함수를 넣어준다.

useMutation

• POST, DELETE 등 서버의 데이터 변경 작업을 요청할때 사용
• option
  • stale time을 지정해서 fresh 상태를 유지할 수 있음
  • cache time을 지정해서 캐시를 메모리에 남아있는 시간을 지정할 수 있음

function func() {
  const mutation = useMutation(state => axios.post("/post", text));
  
  return (
    <div>
      { mutation.isLoading ? (
        'Loading...'
      ) : (
        <>
          { mutation.isError ? (
            <div>Error</div>
          ) : null }
          { mutation.isSuccess ? (
            <div>Success</div>  
          ) : null }

          <button
            onClick={() => { mutation.mutate("") }}
          />
            Post Request
          </button>
        </>
      )}
    </div>
  )
}

mutate 함수를 사용해 원하는 인자를 담아 함수를 호출할 수 있다.

참고자료
https://tech.osci.kr/2022/07/13/react-query/
https://tech.kakao.com/2022/06/13/react-query/