requestAnimationFrame과 함수 참조 개념 완벽 정리

프론트엔드 개발을 하다 보면 꼭 마주치는 개념,
바로 requestAnimationFrame()과 함수 참조(function)의 차이!

이 글에서는 requestAnimationFrame()을 중심으로,
함수를 값으로 넘기는 원리와 왜 괄호를 붙이지 않아야 하는지까지 이해해본다.

---

requestAnimationFrame이란?

requestAnimationFrame(callback);

• 브라우저가 다음 리페인트 타이밍에 callback을 실행해주는 Web API
• 애니메이션, 부드러운 인터랙션에 최적화
• setInterval보다 성능이 좋고, 배터리 효율도 우수함

---

함수 vs 함수()

표현	의미	실행 여부
sayHi	함수 참조	실행 ❌
sayHi()	함수 실행	실행 ✅

예시 코드:

function sayHi() {
  console.log("안녕!");
}

sayHi(); // 바로 실행됨
sayHi;   // 함수 자체를 참조만 함

---

왜 requestAnimationFrame(sayHi)처럼 괄호를 빼야 할까?

requestAnimationFrame(sayHi);   // 함수 자체를 넘김 (정답)
requestAnimationFrame(sayHi()); // 넘기자마자 실행됨 (실수)

requestAnimationFrame은 함수를 '지금' 실행하는 게 아니라,
"나중에" 실행하기 위해 콜백 함수 자체를 받아야 한다.

실행 순서:

1. 내 코드에서 sayHi 함수 참조를 넘김
2. 브라우저가 다음 프레임 타이밍에 sayHi를 실행함
3. 그때 sayHi()가 실제로 실행됨

---

함수도 값이다 (일급 객체)

JavaScript에서 함수는 값처럼 쓸 수 있다.
다시 말해, 변수에 저장하거나 다른 함수의 매개변수로 넘길 수 있다.

function greet() {
  console.log("Hi!");
}

function run(callback) {
  callback(); // 여기서 실행
}

run(greet); // greet을 넘김

이처럼 함수도 다른 함수의 인자로 전달될 수 있는 "값"이다.
이런 함수를 콜백 함수라고 부른다.

---

requestAnimationFrame vs setInterval

항목	requestAnimationFrame	setInterval
목적	애니메이션	반복 실행
주기	프레임 타이밍 (보통 60FPS)	고정 시간 간격
백그라운드 탭에서	멈춤 (자원 절약)	계속 실행됨
성능	최적화됨	상대적으로 떨어짐

---

요약 정리

• sayHi() → 즉시 실행
• sayHi → 참조만 함, 나중에 실행
• requestAnimationFrame(fn)처럼 함수를 인자로 넘길 땐 괄호 없이
• 함수는 값처럼 사용할 수 있음
• 콜백 함수는 **"나중에 실행할 함수"**를 넘길 때 사용됨

---

마무리

프론트엔드 개발에서 자주 마주치는 패턴이 있다.
**"지금 실행할 함수" vs "나중에 실행할 함수"**의 구분이다.

이 개념을 확실히 이해하면,
setTimeout, addEventListener, fetch, Promise.then 같은 개념도
훨씬 자연스럽게 받아들일 수 있다.