# RAF는 그럼 뭐야? {% embed url="" %} ```markup ``` **requestAnimationFrame 는 Web API 다!!** 이 메서드에 콜백으로 들어가는 메서드는 브라우저가 다음에 렌더링을 하기 전에 실행이되는걸 보장된다. 그 말은 즉슨, **브라우저야 다음에 너의 화면이 업데이트하기전에 내가 등록한 이 콜백 함수들을 수행해줘!** 자ㅑ 그러면 위의 코드에서 버튼을 클릭하면 어떤 일이 일어날까? 1. 버튼이 눌러지면 버튼의 콜백을 **task queue**에 넣는다. 2. **task queue** 에 넣어진 메서드는 이후에 이벤트 루프에 의해 JS의 콜스택으로 가게 된다. 3. 콜스택에 있는 콜백 메서드는 실행이 되는데 **requestAnimationFrame** 을 세번 실행하게 된다. 4. 이 결과로 **request Animation Frame web api 가 실행이 된다.** 5. 웹 API 의 호출 결과로 **Request Animation Frame 을 담당하는 큐에 들어가고, 이 큐에 들어간 콜백 메서드들은 다음번 렌더링이 되기저에 실행이 됨이 보장된다.** 6. 이제 **event loop가 렌더링에 오게 된다면 앞서 등록해 놓은 콜백들이 실행이된다.** 1. 스타일을 베이지색으로 2. 오렌지색으로 3. 최종적으로는 빨강색이 된다. 이 RAF 는 실제로 굉장히 많이 수행된다!!! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://simian114.gitbook.io/blog/undefined/javascript/event-loop/untitled.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.