setTimeout(callback, 0)은 무엇을 의미할까?

1. setTimeout 함수

자바스크립트는 비동기 프로그래밍을 지원하여 웹 애플리케이션에서 스레드를 차단하지 않고 작업을 실행할 수 있게 합니다. 이러한 비동기성을 활용할 수 있는 함수로 setTimeout이 있습니다.

 

setTimeout 함수는 일정 시간이 지난 후에 함수를 실행하거나 코드 블록을 실행하는 데 사용됩니다. 보통 setTimeout 함수의 첫 번째 인자로는 실행하고자 하는 함수를, 두 번째 인자로는 지연 시간(ms 단위)을 전달합니다.

// setTimeout 함수 사용법

setTimeout(() => {
  callback(); // 1초 지연 시간 뒤 호출
}, 1000); // ms 단위로 지연 시간 설정

2. 0ms 지연시간이 가지는 의미

// 왜 setTimeout 함수에 지연 시간을 0ms로 줄까?
// 함수를 바로 호출하는 것과 차이가 있을까?

setTimeout(() => {
  callback();
}, 0);

흥미로운 점은 setTimeout 함수에 지연 시간으로 0ms을 전달하는 경우입니다. 처음 이 코드를 보면 혼동이 옵니다. setTimeout(callback, 0)이 실행되면 실제로 0 ms(1 / 1000초) 후에 (딜레이 없이) 즉시 실행될 것으로 예상하지만 사실은 이렇게 동작되지 않기 때문이죠.

 

setTimeout(callback, 0)은 실제로 즉시 실행되지 않고, 현재 실행 중인 코드 블록이 완료된 다음에 실행됩니다. 즉, 동기적인 작업과 현재 실행 중인 태스크가 완료되면 이벤트 큐에 쌓여있는 작업 중에서 setTimeout(callback, 0)으로 등록된 콜백 함수가 실행되는 것입니다.

console.log("1번");

setTimeout(() => {
  console.log("2번");
}, 0);

console.log("3번");

// 실제 결과
// setTimeout(callback, 0) 의 console.log("2번"); 태스크 큐에 들어가 있고 모든 동기적인 코드가 실행이 완료된 후 호출됨.
1번
3번
2번

따라서 setTimeout(callback, 0)을 사용하면 브라우저가 차단되지 않는 비동기적인 동작을 보장받을 수 있습니다. 이러한 특성은 특히 복잡한 연산이나 DOM 업데이트와 같은 작업을 수행할 때 유용합니다.

 

브라우저는 다른 작업들과의 상호작용으로 인해 UI가 응답하지 않는 것처럼 느껴질 수 있습니다. 이런 경우, setTimeout(callback, 0)을 사용하여 해당 작업을 브라우저가 처리 가능한 가장 빠른 시간에 예약함으로써 사용자 경험을 향상시킬 수 있습니다.

3. setTimeout(callback, 0) 활용

특히 인터랙션, 애니메이션처럼 DOM이 로드된 후 호출해야 하는 함수가 있을 경우 setTimeout(callback, 0)을 활용할 수 있습니다.

import { useEffect } from "react";

const ExampleComponent = () => {

  useEffect(() => {
    setTimeout(() => {
      // 인터랙션, 애니메이션처럼 DOM이 로드된 후 호출해야 하는 함수가 있을 때
      // setTimeout(callback, 0) 을 활용할 수 있습니다.
      // animation() 함수가 태스크 큐에 들어가기 때문에 동기적인 작업이 완료된 후 호출됩니다.

      animation();
    }, 0);
  }, []);

  ...
};

export default ExampleComponent;

4. 유의할 점

하지만, 적절하게 사용해야 합니다. 너무 많은 setTimeout(callback, 0)를 남발하면 결과적으로 CPU 자원을 낭비하게 될 수 있으며, 이는 성능 저하로 이어질 수 있습니다!