[JavaScript]requestAnimationFrame(code)

See the Pen eYgPXLb by minsucoding (@minsucoding) on CodePen.

 

위 예제를 보면 아주 간단합니다

requestAnimationFrame이 자기 자신을 호출하는걸 볼수있는데, 이를 잘 생각해보면 이 함수형메소드가 무엇을 행하는지 금방 알수있습니다

컴퓨터는 데이터를 읽을때 위에서 아래로 읽어내려오는 Cascading 형태로 읽어옵니다
그러면 loof가 실행되고 아래 코드들이 실행되고 최종적으로 requestAnimationFrame이 실행되는것이죠
근데 requestAnimationFrame이 무엇을 호출하고 있죠? 다시 loof를 호출하고 있는걸 볼수있습니다

그말은 즉 다시 loof가 실행되고 끝날쯤에 requestAnimationFrame가 다시 loof를 실행시키니깐 무한적으로 호출하는 구조를 볼수있습니다

이게 requestAnimationFrame의 기본 원리라고 할수있습니다

즉 requestAnimationFrame은 함수내에서 가장 마지막에 선언하고 함수 자신을 호출해주어야 한다는것입니다

우선 놓치고 갈수있는 가장 기본적인 부분이 화면이 로딩되어을때 함수는 자체적으로 실행이 되지않습니다
그렇기 때문에 외부에 loof 를 한번 실행 해주어야지 loof 가 정상적으로 작동하게 되니 이 점을 꼭 주의 해주시기 바랍니다