[React] react-async 라이브러리

 

react-async는 요청 상태 관리를 위해서 사용하는 라이브러리입니다.

 

먼저 라이브러리를 설치합니다.

$ yarn add react-async

 

해당 라이브러리의 README를 보면 많은 내용들이 들어가 있습니다.

import React from "react"
import { useAsync } from "react-async"

const fetchPerson = async ({ id }, { signal }) => {
  const response = await fetch(`https://swapi.co/api/people/${id}/`, { signal })
  if (!response.ok) throw new Error(response.status)
  return response.json()
}

const Person = ({ id }) => {
  const { data, error } = useAsync({ promiseFn: fetchPerson, id })
  if (error) return error.message
  if (data) return `Hi, my name is ${data.name}!`
  return null
}

const App = () => {
  return <Person id={1} />
}

 

react-async 의 useAsync 를 사용 할 때 파라미터로 넣는 옵션 객체에는 호출 할 함수 promiseFn 을 넣고, 파라미터도 필드 이름과 함께 ( Id ) 넣어주어야 합니다.

useAsync에서는 watch 를 사용할 수 있는데, 이것은 watch 값에 특정 값을 넣어주면 해당 값이 바뀔 때마다 promiseFn 에 넣은 함수를 다시 호출해줍니다.

 

두 번째 함수인 Person에서 여러가지 함수를 써볼 수 있는데 그 중에 isLoading, reload, run이 있습니다.

const { data, error, isLoading, reload, run } = useAsync({
  deferFn: fetchPerson
})

 

isLoading 은 로딩되고 있을 때를 표시해 줍니다.

reload는 말 그대로 리렌더링 시켜주는 함수입니다. 만약 버튼에 reload를 onClick에 넣어두면 버튼을 눌렸을 때 리렌더링 됩니다.

<button onClick={reload}>리렌더링하기</button>

 

run은 동작을 시작시켜주는 함수입니다. 처음부터 데이터를 가져오지 않고 버튼을 눌렸을 때 데이터를 가져오게끔 하고 싶을 때 사용할 수 있습니다. 그 때는 꼭 promiseFn 대신 deferFn 을 사용해야합니다.

<button onClick={run}>불러오기</button>

 

 

💡 장점

• 필요할 때 설치해서 바로 사용할 수 있다.
• 컴포넌트에서 비동기 작업할 때 필요한 기능들이 대부분 탑재되어 있다.
• Hook말고도 컴포넌트 형태로도 사용가능하다.
• 요청을 취소하는 기능도 가지고 있다.

💡 단점

• 옵션이 복잡하다