requestAnimationFrame vs setTimeout — 부드러운 렌더링의 비밀

<div id="box" style="width:50px;height:50px;background:skyblue;position:absolute;"></div>
<script>
    const box = document.getElementById('box')
    let pos = 0
 
    // setTimeout 버전
    function moveWithTimeout() {
        pos += 2
        box.style.left = pos + 'px'
        if (pos < 500) setTimeout(moveWithTimeout, 16)
    }
 
    // requestAnimationFrame 버전
    function moveWithRAF() {
        pos += 2
        box.style.left = pos + 'px'
        if (pos < 500) requestAnimationFrame(moveWithRAF)
    }
 
    // 버튼으로 실행 선택
    const btn1 = document.createElement('button')
    btn1.textContent = 'setTimeout 실행'
    btn1.onclick = moveWithTimeout
    const btn2 = document.createElement('button')
    btn2.textContent = 'requestAnimationFrame 실행'
    btn2.onclick = moveWithRAF
    document.body.append(btn1, btn2)
</script>

// ❌ setTimeout 방식
window.addEventListener('scroll', () => {
    setTimeout(() => {
        console.log(window.scrollY)
    }, 16)
})
 
// ✅ requestAnimationFrame 방식
let ticking = false
window.addEventListener('scroll', () => {
    if (!ticking) {
        requestAnimationFrame(() => {
            console.log(window.scrollY)
            ticking = false
        })
        ticking = true
    }
})

function SmoothCounter() {
    const [count, setCount] = useState(0)
 
    const handleIncrease = () => {
        let current = count
        const animate = () => {
            current += 1
            setCount(current)
            if (current < 100) requestAnimationFrame(animate)
        }
        requestAnimationFrame(animate)
    }
 
    return <button onClick={handleIncrease}>Count: {count}</button>
}

function render() {
    drawChartData() // 실제 그리기
    requestAnimationFrame(render) // 프레임마다 갱신
}
render()