React useInterval 훅 마스터하기 - 타이머, 애니메이션 구현

소개

이 랩에서는 React 에서 useInterval 커스텀 훅을 사용하여 선언적인 방식으로 setInterval() 함수를 구현하는 방법을 배웁니다. 이 훅은 지정된 시간 간격으로 작업을 반복적으로 수행하기 위한 간격을 설정하는 데 도움이 됩니다. 이 랩을 마치면 useInterval 훅을 사용하여 React 애플리케이션에서 타이머, 애니메이션 및 기타 시간 기반 기능을 만드는 방법에 대한 이해도가 높아질 것입니다.

React useInterval 훅

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

선언적인 방식으로 setInterval()을 구현하려면 callback과 delay를 사용하는 커스텀 훅을 만들 수 있습니다. 첫 번째 단계는 useRef() 훅을 사용하여 콜백 함수에 대한 ref를 만드는 것입니다. 그런 다음 useEffect() 훅을 사용하여 콜백이 변경될 때마다 최신 callback을 기억합니다. 마지막으로 delay에 종속된 useEffect() 훅을 사용하여 간격을 설정하고 정리합니다.

다음은 커스텀 훅에 대한 코드 스니펫 예시입니다.

const useInterval = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

그런 다음 이 커스텀 훅을 컴포넌트에서 사용할 수 있습니다. 예를 들어, 매 초마다 업데이트되는 타이머를 만들려면 다음과 같이 할 수 있습니다.

const Timer = (props) => {
  const [seconds, setSeconds] = React.useState(0);

  useInterval(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p>{seconds}</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Timer />);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

React useInterval 훅

소개

React useInterval 훅

요약