[js] requestAnimationFrame 함수

requestAnimationFrame()은 브라우저가 다음 화면을 그리기 직전에 실행할 콜백을 예약하는 함수입니다.

주로 애니메이션 처리나 렌더링 타이밍을 정확하게 맞추고 싶을 때 사용합니다.

 

✅ 기본 사용법

js

 

requestAnimationFrame(() => {
  // 브라우저가 다음 repaint 전에 실행할 코드
  // DOM이 렌더링된 이후에 안전하게 실행됨
});

---

🧠 개념 요약

항목	설명
실행 시점	브라우저가 다음 프레임을 그리기 직전
호출 빈도	일반적으로 초당 60회 (60fps)
주 목적	부드러운 애니메이션 / 렌더링 이후 DOM 조작
이점	setTimeout보다 부드럽고 효율적이며, 렌더링 타이밍 보장

 

---

🎯 언제 사용하나?

1. DOM 변경 직후 후속 처리
   • 예: innerHTML 또는 .append() 후 특정 요소에 focus, scroll, resize 등 적용하려 할 때.
   js

   element.innerHTML = '<input id="myInput" />';
   requestAnimationFrame(() => {
     document.getElementById('myInput').focus();
   });

    

    
2. 애니메이션 구현
   js
    

function moveBox(timestamp) {
  box.style.left = `${timestamp / 10}px`;
  requestAnimationFrame(moveBox);
}
requestAnimationFrame(moveBox);

 

3.복잡한 계산 또는 레이아웃 조정이 필요한 작업을 defer

requestAnimationFrame(() => {
  heavyLayoutCalculation();
});

---

❗ setTimeout vs requestAnimationFrame

항목	setTimeout(fn, 0)	requestAnimationFrame(fn)
타이밍	이벤트 큐 뒤 (불확실한 시점)	다음 repaint 직전
성능	일정치 않음	최적화된 방식
목적	비동기 처리	렌더링과 시각적 작업 최적화
단점	UI 깜빡임 가능	애니메이션 외 목적에는 적합하지 않을 수 있음

 

---