개발자

requestAnimationFrame은 왜쓰는건가요?

2022년 09월 17일조회 286

안녕하세요, 코드 리뷰 중에 setTimeout 대신 requestAnimationFrame을 써보면 좋을 것 같다라는 피드백을 받았는데, 두 함수의 차이를 잘 모르겠습니다. 기능적으로 비슷한 역할을 하는 것 같아서요. 혹시 setTimeout 대신 requestAnimationFrame을 사용하는 이유가 있을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

지찬규 (피트웨어 제이)님의 프로필 사진

음 일단 질문시 어떤언어인지, 프레임워크인지 남겨주시면 더 좋을 것 같습니다! (아 태그에 있군요! 지금봤네요) js쪽 같은데 전 잘 몰라서 구글링 해본 결과 유튜브로 두개의 차이점을 설명해주는 영상도 있고요 (https://youtu.be/TRWbGGRvX0Y) 구글에 requestanimationframe vs settimeout 라고 검색하니까 스택오버플로우(https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout)에 설명된 내용도 있네요. 한글로 블로그(https://blog.makerjun.com/411591d9-c47b-4d8d-8f9e-1246d8dd1a2f)설명된 내용도 있네요! 먼저 질문자님께 드리고 싶은 말은 기초적인 내용은 대부분 구글링으로 찾을 수 있습니다! 기초적인 내용은 한글로 검색해도 되시고 좀 더 딥하건 영어로 검색하시면 스택오버플로우 같은곳에도 많이 내용이 있습니다! 먼저 구글링을 해보시고 내용이 나오지 않거나, 내용은 알겠는데 이해가 되지 않는 부분? 등에 대해 질문해보시는게 좋을것 같아요! 그렇다고 질문은 하지 말라는건 아니고 구글링하면 쉽게 나오니 QnA로 기다리는것보다 더 빠르게 알 수 있기 때문입니다 + 실무에서는 이렇게 질문을 '계속' 하시면 "일단 찾아봤어? 두개 비교해봤어?"라고 사수가 말할거에요! ㅎㅎ 질문을 잘 하는 방법도 실무에서는 매우 중요한 스킬중 하나입니다!

profile picture

익명

작성자

2022년 09월 20일

정확하시네요. 사수가 같은 피드백을 주셨어요 ㅠㅠ 답변 감사합니다

손정현님의 프로필 사진

setTimeout 대신 requestAnimationFrame을 사용하는 이유는 이름에서도 알 수 있듯이 보통 더 부드러운 애니메이션 연출을 하기 위해서라고 알고 있습니다. setTimeout을 사용하면 타이밍이 안 맞으면 프레임을 건너뛸 수 있는 여지가 있고, requestAnimationFrame을 사용하면 다음 repaint 전에 실행하도록 되어 있어요. 그리고 requestAnimationFrame은 백그라운드 상태에서는 대기하게 됩니다. 지찬규님의 답변처럼 어떤 부분이 이해가 되지 않는지 조금 더 구체적으로 질문을 해주시는게, 답변하시는 분들에게 도움이 될 것 같아요 😎 https://web.dev/optimize-javascript-execution/ https://dev.to/moyedx3/10-settimeout-setinterval-and-requestanimationframe-1io4 https://developer.mozilla.org/en-US/docs/Web/API/setTimeout https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

profile picture

익명

작성자

2022년 09월 20일

감사합니다~

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!