setTimeout 및 setInterval에 대한 useTimeout 및 useInterval 후크의 장점은 무엇입니까?

안녕하세요 👋 ,

이 팬데믹 시기에 모두가 좋은 일을 하고 있기를 바랍니다.

이 기사에서는 useTimeout 및 useInterval 후크가 setTimeout 및 setInterval의 장점이 무엇인지 설명하고 이러한 후크를 만드는 방법도 보여줍니다.

setTimeout 및 setInterval이 있는 경우 useInterval 및 useTimeout 후크가 필요한 이유는 무엇입니까?

Javascript에서는 setTimeout 또는 setInterval를 초기화하면 콜백 함수나 지연 시간을 수정할 수 없습니다. 더 나은 이해를 위해 예를 들어 설명하겠습니다.

완료 버튼을 클릭하면 N초 후에 사용자에게 주어진 메시지를 표시하는 알림 앱을 구축한다고 가정해 보겠습니다. 여기서 메시지와 초는 사용자 입력입니다. UI가 어떻게 보이는지 👇🏻 이미지를 참조할 수 있습니다.



이 요구 사항에 대해 다음과 같이 맹목적으로 코딩할 수 있습니다.

const Alert = ({}) => {
  const [message, setMessage] = useState("");
  const [delay, setDelay] = useState(0);

  const messageInputHandler = (e) => {
    setMessage(e.target.value);
  };

  const dalayInputHandler = (e) => {
    setDelay(e.target.value);
  };

  const showMessageAfterDelay = () => {
    setTimeout(() => {
      alert(message);
    }, delay * 1000);
  };

  return (
    <div>
      Show <input onChange={messageInputHandler} type="text" /> after
      <input onChange={dalayInputHandler} type="number" /> seconds
      <button onClick={showMessageAfterDelay}>Done</button>
    </div>
  );
};

따라서 위의 코드는 아무 문제 없이 작동하지만 예상되는 사용자를 생각하면 사용자가 메시지를 변경하지 않고 지연되지 않을 것이라고 보장할 수 없습니다.

메시지 및 지연을 동적으로 처리하는 방법 🤔

우리는 setTimeout를 사용하고 있으므로 이를 지워야 하고 업데이트된 값으로 setTimeout를 다시 호출해야 합니다. 운 좋게도 우리는 useEffect를 사용할 수 있습니다. 이제 코드를 수정해야 합니다. 👇🏻

const Alert = ({}) => {
  const [message, setMessage] = useState("");
  const [delay, setDelay] = useState(0);

  const messageInputHandler = (e) => {
    setMessage(e.target.value);
  };

  const dalayInputHandler = (e) => {
    setDelay(e.target.value);
  };

  const showMessageAfterDelay = () => {
    setTimeout(() => {
      alert(message);
    }, delay * 1000);
  };

  useEffect(() => {
    const idx = setTimeout(() => alert(message), delay);

    return () => clearTimeout(idx);
  }, [message, delay]);
  return (
    <div>
      Show <input onChange={messageInputHandler} type="text" /> after
      <input onChange={dalayInputHandler} type="number" />
      seconds
      <button onClick={showMessageAfterDelay}>Done</button>
    </div>
  );
};

여기서 useEffect는 message 또는 delay 값이 업데이트되면 자동으로 호출되므로 Done 버튼 🤔 정말 필요합니다. 처음에는 setTimeout을 트리거하는 데 사용했습니다. 이제 여기useEffect에서 처리합니다.

리팩토링 후 코드는 다음과 같습니다 👇🏻

const Alert = ({}) => {
  const [message, setMessage] = useState("");
  const [delay, setDelay] = useState(0);

  const messageInputHandler = (e) => {
    setMessage(e.target.value);
  };

  const dalayInputHandler = (e) => {
    setDelay(e.target.value);
  };

  useEffect(() => {
    const idx = setTimeout(() => alert(message), delay);

    return () => clearTimeout(idx);
  }, [message, delay]);
  return (
    <div>
      Show <input onChange={messageInputHandler} type="text" /> after
      <input onChange={dalayInputHandler} type="number" />
      seconds
    </div>
  );
};

우리는 위의 것이 좋습니다. 그러나 며칠 후 다른 페이지에서 동일한 시나리오가 발생했지만 이번에는 메시지 대신 기능을 동적으로 변경해야 합니다. 그래서 우리는 이것을 어떻게 달성할 수 있습니까? 🤔.

해결책

우리는 useTimeout라는 후크를 만들 수 있고 후크 자체가 callback function 및 delay 업데이트되어야 하는 인수가 업데이트되면 인수로 callback function 및 delay를 전달할 수 있습니다.

다음은 useTimeout 후크에 대한 코드입니다.

const useTimeout = (fn, delay) => {
  const fnRef = useRef(null);

//When ever function got updated this👇🏻useEffect will update fnRef
  useEffect(() => {
    fnRef.current = fn;
  }, [fn]);

//When ever delay got updated this👇🏻useEffect will clear current one and create a new one with updated delay value
  useEffect(() => {
    const idx = setTimeout(fn, delay);

    return () => clearTimeout(idx);
  }, [delay]);

  return;
};

이제 문제가 유사하게 해결되었습니다. useInterval에 대해서도 마찬가지로 할 수 있습니다.

const useInterval = (fn, delay) => {
  const fnRef = useRef(null);

//When ever function got updated this👇🏻useEffect will update fnRef
  useEffect(() => {
    fnRef.current = fn;
  }, [fn]);

//When ever delay got updated this👇🏻useEffect will clear current one and create a new one with updated delay value
  useEffect(() => {
    const idx = setInterval(fn, delay);

    return () => clearInterval(idx);
  }, [delay]);

  return;
};

당신이 뭔가를 배웠기를 바랍니다. 공유하고 반응해주세요 🤨 마음에 드셨다면

감사합니다 🙏🏻

날 따라와
링크드인 :
트위터 :
Github : https://github.com/saketh-kowtha