Throttle

• 함수가 한번 호출되면, 일정 시간이 지나기 전에 다시 호출되지 않도록 막는 것
• 게임의 스킬이 쿨타임 동안은 눌려도 스킬이 안 나가게 하는 것과 동일

import React, { useEffect, useRef, useState } from "react";

const hackLotterNumbers = () => {
  console.log("hack lotto numbers");
  const lottoNumbers = [];
  for(let i = 0; i < 6; i++){
    const number = Math.floor(Math.random() * 45) + 1;
    lottoNumbers.push(number);
  }
  return lottoNumbers;
}

const App = () => {
  const [lottoNumbers, setLottoNumbers] = useState([0, 0, 0, 0, 0, 0]);

  // 버튼을 누른 시간
  const lastRun = useRef(Date.now());

  const handleClick = () => {
    // 쿨 타임 계산
    const timeElapsed = Date.now() - lastRun.current;
    if (timeElapsed >= 1000) {
      const result= hackLotterNumbers();
      setLottoNumbers(result);
      lastRun.current = Date.now();
    }
    
  };

  return (
    <div className="container">
      <h1 className="title">Lotto Number</h1>
      <button className="button" onClick={handleClick}>번호 맞추기</button>
      <div className="numbers">
        {lottoNumbers.map((number, index) => (
          <span key={index} className="number"> {number} </span>
        ))}
      </div>
    </div>
  )
};

export default App;

import { useRef } from "react";

export function useThrottle(callback, delay) {
    // 버튼을 누른 시간
  const lastRun = useRef(Date.now());
    return () => {
        const timeElapsed = Date.now() - lastRun.current;
        if (timeElapsed >= delay) {
            callback();
            lastRun.current = Date.now();
        }
    }
}

import React, { useEffect, useRef, useState } from "react";
import { useThrottle } from "./Component/useThrottle";

const hackLotterNumbers = () => {
  console.log("hack lotto numbers");
  const lottoNumbers = [];
  for(let i = 0; i < 6; i++){
    const number = Math.floor(Math.random() * 45) + 1;
    lottoNumbers.push(number);
  }
  return lottoNumbers;
}

const App = () => {
  const [lottoNumbers, setLottoNumbers] = useState([0, 0, 0, 0, 0, 0]);

  const handleClick = useThrottle(() => {
    const result = hackLotterNumbers();
    setLottoNumbers(result);
  }, 1000);

  return (
    <div className="container">
      <h1 className="title">Lotto Number</h1>
      <button className="button" onClick={handleClick}>번호 맞추기</button>
      <div className="numbers">
        {lottoNumbers.map((number, index) => (
          <span key={index} className="number"> {number} </span>
        ))}
      </div>
    </div>
  )
};

export default App;