sleep 함수 만들기
오늘은 특정 시간만큼 대기했다가 다음 문장을 실행해야 할 경우에
유용하게 쓰일 수 있는 함수를 만들어볼 거예요.
제 프로젝트에서 통신하는 장비에 특정 명령이 들어가면 2초 정도 대기했다가
다음 명령을 보내야 해서 필요했거든요.
저는 react native 프로젝트를 진행 중이지만 react에서도 똑같이 적용됩니다.
setTimeout
setTimeout을 이용하면 특정 시간만큼 딜레이를 준 후에 코드를 실행할 수 있습니다.
setTimeout(() => {
console.log("Delayed for 1 second.");
}, 1000)
위와 같이 첫 번째 인수 값으로 함수를 넣고, 두 번째 인수 값으로 delay값을 넣습니다.
delay값은 milliseconds단위입니다.
그래서 1000을 넣으면 1초가 됩니다.
delay에는 반드시 문자열이 아닌 숫자를 넣어야 합니다
(문자열로 "1000"이나 "1 seconds"식으로 넣는 경우 0으로 강제 변환되어 지연 없이 코드 실행됩니다)
Promise
setTimeout으로 특정 시간만큼 딜레이를 줄 수 있지만 여전히 문제가 있습니다.
기본적으로 자바스크립트는 동기식 언어기 때문에 딜레이 시간만큼
기다려주지 않고 다음 작업을 실행할 것이기 때문이죠.
그럼 비동기로 처리하는 방법을 알아야겠죠?
Promise를 이용하면 비동기 처리가 가능해집니다.
MDN의 기본 예제를 보겠습니다.
let myFirstPromise = new Promise((resolve, reject) => {
// 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
// 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
// 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
setTimeout( function() {
resolve("성공!") // 와! 문제 없음!
}, 250)
})
위와 같이 new Promise로 새로운 Promise 객체를 만들어주고, 그 안에 setTimeout을 넣어 비동기 코드를 사용할 수 있습니다.
이제 useSleep이라는 커스텀 훅을 만들어 보겠습니다.
useSleep
useSleep.js라는 파일을 만들어주었습니다.
그리고 그 안에 아래 코드를 넣어줍니다.
export const useSleep = delay => new Promise(resolve => setTimeout(resolve, delay));
정말 간단하죠??
이제 사용 예시를 살펴보겠습니다.
const testFunction = async () => {
console.log("첫 번째 작업 실행");
await useSleep(2000);
console.log("두 번째 작업 실행");
};
log를 2초 간격을 두고 올려보겠습니다.
그러면 첫 번째 console.log를 적고 useSleep을 사용해 주시면 되는데요.
이때 함수는 async 함수로 생성해 주시고 useSleep앞에 await를 붙여주세요.
async를 쓰면 비동기 함수로 선언할 수 있습니다.
그리고 await는 async 함수를 일시정지 시킨 후 전달된 Promise가 해결되고 나면
다시 async를 실행하게 합니다.
그래서 useSleep에 2000밀리 초의 딜레이를 전달해서 setTimeout을 2초 뒤에 실행시키고 그 Promise가 해결되면 다음 console.log가 실행됩니다.