[URH-103] useDelayFlag 수정 및 문서 작성

[bicochan]

👾 Pull Request

• 티켓: [useDelayFlag 수정 및 문서 작성](티켓 URL)
• 상태: 수정 및 신규 문서 작성

1️⃣ Spec

• 데이터 페칭 시, 페칭(또는 로딩) 플래그를 지연시킨 시간동안 유지하여 로딩 UI의 깜빡임 현상 제거, 중복 호출 방지 등의 용도로 사용할 수 있습니다.
• 지연시킨 시간보다 플래그의 업데이트가 더 늦을 경우 지연 시간을 무시하고 플래그의 실제 업데이트 시점을 반환합니다.

2️⃣ 변경 사항

• 기존에 단순히 true를 false로 바꾸는 로직에서 boolean 값을 스위칭하는 로직으로 수정

3️⃣ 예시 코드

import { useEffect, useState } from 'react';
import { useDelayFlag } from '@frontend-opensource/use-react-hooks';

function App() {
  const [flag, setFlag] = useState(true);
  const delayFlag = useDelayFlag({ flag, delayTime: 3000 });

  // 1초 뒤에 flag를 업데이트하는 함수
  const updateFlagAsync = async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setFlag(false);
  };

  useEffect(() => {
    updateFlagAsync();
  }, []);

  return (
    <div>
      {/* 1초 뒤에 flag 업데이트됨 */}
      {flag ? <p>Loading...</p> : <p>Loaded</p>}

      {/* 3초 뒤에 delayFlag 업데이트됨 */}
      {delayFlag ? <p>Delayed Loading...</p> : <p>Delayed Loaded</p>}
    </div>
  );
}

문서 스크린샷