TIL - Javascript

시간지연함수 vs 시간반복함수

시간지연함수- setTimeout(함수,초)
의미: 특정 시간초 이후에 값이 나오는 걸 의미한다.

시간반복함수 - setInterval(함수, 초)
의미: 특정 인터벌동안 값이 꾸준히 나오는 걸 의미한다.

시간지연함수는 실무에 어떻게 쓰일까?

게임 강화:
바로 강화 결과를 보여주면 재미가 없기때문에 setTimeout을 줘서 강화 결과를 보여줄 수 있다.

시간반복함수는 실무에 어떻게 쓰일까?
인증번호 유효시간:
보통 3분내에 인증번호를 타입하지않으면 서비스 시작버튼이 무효화 된다거나 이런 형태로 함수를 쓸 수 있다.

시간반복함수의 활용(실무)

import {useState} from "react";
const Timer = () => {
	const[token, setToken] = useState('000000')
	const[timer, setTimer] = useState('03:00')
	const[buttonDeact, setButtonDeact] = useState(false)

// button을 disabled시키고 싶다면 <button disabled = "true></button>으로 해주면 된다.

function sendAuth(){
//javascript문
	// 인증번호를 랜덤하게 계속 바꿀수 있게하는 코드
	const temp = String(Math.floor(Math.random() * 1000000)).padStart(6, '0')
	setToken(temp) 

	// 인증번호 만료시간 제어코드
	let time = 180;

	const TimeExpiration = setInterval(function(){
		const minutes = String(Math.floor(time / 60).padStart(2, '0')
		const seconds = String(time % 60).padStart(2,'0')
		const LiveTime = `${minutes}:${seconds}`
		
		setTimer(LiveTime)
		time = time -1
		if(time <0){
				clearInterval(TimeExpiration) // 값을 3분 이후에 멈추기 위한 함수 clearInterval
				setButtonDeact(true); // clearInterval 한 이후에 setButtonDeact를 한다.
},1000)
	
return(
	<span>{token}</span> //useState를 이용해서 계속해서 바뀌는 값을 html에 뿌려준다.
	<button onClick = {sendAuth}>인증번호 전송 </button>
	<span>{timer}</span>
	<button disabled ={buttonDeact}>인증완료</button>
);

};

스위치 껏다 켰다 하는 함수

setAaa(prev ⇒ !prev) // 만약현재 aaa가 false라면, aaa가 true로 변환되는 것이고, aaa가 true라면 false로 반환한다
setAaa(prev ⇒ {

return ()

})이 원래 맞지만 return문 위에 아무런 내용이 들어가지 않는다면 맨윗줄같이 한줄로 표현이 가능하다