인프런 커뮤니티 질문&답변

초보님의 프로필 이미지

작성한 질문수

Svelte 입문 강의 - A부터 Z까지

이벤트 수식어

이벤트 수식어 중에서 passive 설명이 잘 이해가 되질 않습니다

작성

·

953

1

안녕하세요

좋은 강의 잘 듣고 있습니다

passive를 적용했을때 "터치 혹은 휠 이벤트로 발생하는 스크롤 성능을 향상시킨다" 라고 설명해주셨는데요

무슨 의미인지 잘 모르겠습니다 ^^;

적용되는 또는 적용될만한 상황을 조금 더 알려주실 수 있으실까요?

답변 3

1

초보님의 프로필 이미지
초보
질문자

고맙습니다~~

1

이효범(Beomy)님의 프로필 이미지
이효범(Beomy)
지식공유자

강의 들어주셔서 감사합니다. :)

아래 코드와 같이 터치, 휠 이벤트는 preventDefault를 사용하면 스크롤을 막을 수 있습니다.

<script>
	function handle (event) {
		event.preventDefault();
	}
</script>
<div on:wheel={handle} on:touchmove={handle}></div>
<style>
	div {
		height: 200vh;
	}
</style>

브라우저에서는 터치 혹은 휠 이벤트가 발생할 때 마다 스크롤을 할지 말지 결정을 해야 합니다. 스크롤이 발생하면 많은 이벤트가 발생하게 되는데, 이벤트 마다 스크롤을 할지 말지 판단하게 된다면 브라우저는 느려질 수 있습니다.

이때 passive 속성을 사용해서 브라우저에게 preventDefault를 사용해서 스크롤을 막지 않겠다고 알려줍니다. 그러면 브라우저는 항상 스크롤을 하는 것으로 인식하고, 스크롤 할지 말지 결정하는데 낭비되는 자원을 절약해서 성능을 향상 시킬 수 있게 됩니다.

참고가 될 만한 링크입니다.

http://sculove.github.io/blog/2016/12/29/addEventListener-passive/

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

0

이효범(Beomy)님의 프로필 이미지
이효범(Beomy)
지식공유자

질문 주셔서 갑사합니다. :)

이해하기 어려운거 있다면 언제든 질문 주세요~!

초보님의 프로필 이미지

작성한 질문수

질문하기