Event

[cys4585]

1. 프론트엔드에서 Event란 무엇인가요?
2. Event Propagation(이벤트 전파)에 대해 설명해주세요.
3. Event Delegation(이벤트 위임)에 대해 설명해주세요.
4. Event가 과도하게 호출되면 어떤 문제가 일어나고, 어떻게 해결할 수 있나요?
5. Custom Event는 어떻게 사용하나요?

[cys4585]

1. 프론트엔드에서 Event란 무엇인가요?

브라우저에서 발생한 특정 사건을 Event라고 합니다.

예를 들어 마우스 클릭, 키보드 입력 등의 사건이 발생하면 브라우저는 특정 타입의 이벤트를 트리거합니다.

웹앱은 이벤트 핸들러라는 함수를 등록하여 브라우저의 이벤트 발생에 반응하여 특정한 일을 할 수 있습니다.

이 이벤트와 이벤트 핸들러를 통해 사용자와 웹앱이 상호작용을 할 수 있습니다.

2. Event Propagation(이벤트 전파)에 대해 설명해주세요.

Event Propagation이란, DOM 노드에서 발생한 이벤트가 DOM Tree를 통해 전파되는 것입니다.

Event Propagation은 이벤트 객체가 전파되는 방향에 따라 3단계로 구분할 수 있습니다.

1. Capturing phase: 이벤트 상위 요소에서 하위 요소 방향으로 전파
2. Target phase: 이벤트가 타겟에 도달
3. Bubbling phase: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

3. Event Delegation(이벤트 위임)에 대해 설명해주세요.

Event Delegation이란, Event Bubbling을 이용해 여러 개의 하위 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 요소에 이벤트 핸들러를 등록하는 것입니다.

상위 요소에 할당한 이벤트 핸들러에서 event.target을 이용해 타겟 요소를 알 수 있습니다. 이를 통해 여러 이벤트를 핸들링할 수 있습니다.

이벤트 위임을 활용하면 많은 이벤트 핸들러를 할당하지 않아도 되기 때문에 코드와 메모리에 유리합니다.

4. Event가 과도하게 호출되면 어떤 문제가 일어나고, 어떻게 해결할 수 있나요?

스크롤, 리사이즈, 입력 등의 이벤트가 너무 자주 발생할 경우 해당 이벤트 핸들러가 대량으로 실행되면서 메인 스레드가 바빠질 수 있습니다. 이로인해 렌더링이나 사용자와의 인터렉션에 문제가 생길 수 있습니다.

Debouncing, Throttling과 같은 방식으로 이 문제를 해결할 수 있습니다.

• 디바운싱: 짧은 시간 내에 여러 번 호출된 이벤트 중 마지막 한 번만 처리하는 방식입니다.
  • setTimeout(callback, delay)로 이벤트 핸들러 호출을 걸어두고, delay 시간 내에 또 호출된 경우 clearTimeout(timeoutId)로 기존 예약을 취소하는 방식으로 구현할 수 있습니다.
• 쓰로틀링: 일정 시간 간격으로 이벤트가 호출되도록 제한하는 방법입니다.
  • isThrolle 플래그를 두고, 이벤트 핸들러가 실행되는 동안은 true, 일정 시간 뒤에 setTimeout을 통해 false로 바꿔주는 방식으로 구현할 수 있습니다.

5. Custom Event는 어떻게 사용하나요?

new 생성자함수()로 커스텀 이벤트를 생성할 수 있습니다.

노드객체.dispatchEvent(customEvent) 함수를 통해 커스텀 이벤트를 발생시킬 수 있습니다.

dispatchEvent의 두 번째 인수로 detail 프로퍼티를 포함하는 객체를 전달해 커스텀 이벤트에 별도의 정보를 담아서 전달할 수 있습니다.