[React] react component 에 async-await 쓰고 싶을 때, useAsync()

useAsync() 는 react-async 라이브러리에서 제공하는 hooks 다.

react component 에서 비동기 통신으로 받아온 데이터를 쓸 때, 함수형 컴포넌트 앞에 async 를 붙여주면 오류가 뜬다.

이럴 때 useAsync() 를 사용한다.

 

사용법은 이렇다.

export const searchDetailById = async ({ id }) => {
  const { data: result } = await axios.get(
    `https://www.serveradress?id=${id}`
  );

  return result;
};

import { useAsync } from "react-async";
import { searchDetailById } from "./Data";

function Test({id}) {
	const {
		data: detail,
		error,
		isLoading,
	} = useAsync({
		promiseFn: searchDetailById,
		id: id,
		watch: id,
	});
    
	if (isLoading) return <div>loding...</div>;
	if (error || !detail) return <div>error!</div>;
    
	return (<div> detail.name </div>);
 }

 

useAsync() 는 결과로 {data, error, isLoding} 객체를 반환한다.

필요한 파라미터는 {promiseFn, id, watch} 이다.

promiseFn 은 비동기 통신으로 데이터를 받아오는 함수이고 id와 watch 는 해당 함수에 보낼 인자다. {id, watch} 객체로 보내진다.

 

이렇게 하면 searchDetailById({id, watch}) 를 실행시켜 결과를 받아 data, error, isLoading 으로 반환한다.