requestAnimationFrame()

[Seon-K]

📌 배운 내용

• requestAnimationFrame은 브라우저에 "다음 리페인트 직전에 특정 콜백 함수를 실행해달라"고 예약하는 함수입니다.
• setTimeout(fn, 0)은 이벤트 큐에 콜백을 넣지만, 브라우저의 렌더링 시점과는 별개로 실행될 수 있기 때문에 DOM 업데이트가 완료되기 전에 동작할 가능성이 있습니다.
• 반면, requestAnimationFrame(fn)은 브라우저의 렌더링 주기를 고려해 레이아웃 계산, 스타일 계산, DOM 업데이트가 모두 끝난 후에 콜백을 실행하므로, 화면에 반영된 이후의 시점에서 안전한 UI 작업이 가능합니다.
• 따라서 렌더 이후 DOM 요소에 포커스를 주거나, 레이아웃 기반 스크롤, 트랜지션 작업 등 시각적 안정성이 중요한 작업에는 requestAnimationFrame이 적합합니다.

---

🔍 배경 / 문제 상황

• Pagination 공통 컴포넌트 #84

페이지네이션에서 키보드 방향키(←, →)를 통해 페이지를 이동할 때, 다음과 같이 setTimeout을 활용하여 포커스를 이동했습니다.

// 포커스 이동: 페이지 변경 후 렌더가 완료되어야 함
setTimeout(() => {
  const index = pages.findIndex((p) => p === nextPage);
  if (index !== -1) {
    pageRefs.current[index]?.focus();
  }
}, 0);

하지만 이 방식은 렌더링 직후 포커스를 정확히 잡지 못하고, 포커스가 깜빡이거나 탭이 덜컹거리는 문제가 발생했습니다.

pagination.mp4

---

✅ 핵심 정리 / 해결 방법

• 위 문제를 해결하기 위해 setTimeout 대신 requestAnimationFrame을 사용하여 페이지 전환 후 포커스 이동을 아래와 같이 구현했습니다.

requestAnimationFrame(() => {
  pageButtonMapRef.current.get(nextPage)?.focus();
});

• 이 방식은 브라우저가 DOM 업데이트 → 스타일 계산 → 레이아웃 계산 → 페인팅을 마친 가장 안정적인 타이밍에 포커스를 이동하기 때문에 덜컹임 없이 자연스럽게 포커스가 이동합니다.

• 특히 페이지 버튼들이 조건부 렌더링되고 key 변경에 따라 재생성되는 구조에서는 렌더 완료 시점을 정확히 보장하는 requestAnimationFrame이 안정적으로 동작할 수 있게 합니다.

해당 방식을 적용하고 포커스가 정상적으로 이동함을 확인할 수 있었습니다.

pagination.mp4

---

🧠 느낀점 또는 생각 메모

• requestAnimationFrame은 애니메이션 용도로만 사용하는 줄 알았지만, "렌더 이후의 시점"을 명확하게 잡고 싶은 모든 UI 후처리에 유용한 도구라는 점을 체감했습니다.

• setTimeout(..., 0)은 렌더 이후 실행을 보장하지 않는다는 한계를 갖고 있었고, 이는 눈에 보이는 UI 깜빡임으로 보여진다는 것을 알 수 있었습니다.

• 이번 경험을 통해 렌더 타이밍 제어가 중요한 상황에서는 requestAnimationFrame을 우선 고려하는 습관을 가져야겠다고 느꼈습니다.

---

📚 래퍼런스

• Inpa Dev: http://inpa.tistory.com/entry/%F0%9F%8C%90-requestAnimationFrame-%EA%B0%80%EC%9D%B4%EB%93%9C
• MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame