230704 useLoading hooks로 Promise 사용하기

230704 useLoading hooks와 react-query로 데이터 가져오기

 

useLoading

• useLoading 훅은 loading 과 startPromise를 반환한다.
• startPromise(promise)는 인자로 Promise를 입력 받고, 결과를 반환한다.
• loading 변수를 통해 Promise가 진행되는 동안 로딩 상태를 알려준다.

useLoading | Slash libraries

// toss - useLoading
import { useCallback, useMemo, useState } from "react";

export function useLoading(): [
  boolean,
  <T>(promise: Promise<T>) => Promise<T>
] {
  const [loading, setLoading] = useState(false);
  const startPromise = useCallback(async <T>(promise: Promise<T>) => {
    try {
      setLoading(true);
      return await promise;
    } finally {
      setLoading(false);
    }
  }, []);
  return useMemo(() => [loading, startPromise], [loading, startPromise]);
}

 

useLoading 사용법

User 컴포넌트 로드 시 useLayoutEffect 실행 -> handleFetchData 실행하여 user 데이터를 가져오고

fetch가 진행되는 동안 <div>loading...</div>을 표시

import { useCallback, useLayoutEffect, useState } from "react";
import { useLoading } from "./useLoading";

const fetchUser = async () =>
  await (await fetch("https://jsonplaceholder.typicode.com/users/1")).json();

export const User = () => {
  const [loading, startAsync] = useLoading();
  const [user, setUser] = useState(null);

  const handleFetchData = useCallback(async () => {
    try {
      const res = await startAsync(fetchUser());
      setUser(res);
    } catch (error) {
      console.log(error);
    }
  }, [startAsync]);

  useLayoutEffect(() => {
    handleFetchData();
  }, [handleFetchData]);

  if (loading) return <div>loading...</div>;
  return <div>{user.name}</div>;
};

export default function App() {
  return (
    <div className="App">
      <User />
    </div>
  );
}