웹 컴포넌트의 이벤트 처리

시간이 지난 후, 코드를 리팩토링 하는 과정에서 작업 이유에 대해 찾아보기 위해 TIL 카테고리를 만들었습니다!

 

오늘은 Vanilla JavaScript로 웹 컴포넌트를 만들던 중 마우스 다운(mousedown) 이벤트와 마우스 업(mouseup) 이벤트, 그리고 클릭(click) 이벤트 간의 충돌이 발생해, 각 이벤트의 동작이 서로 독립적으로 실행될 수 있도록 조정한 내용을 간단히 기록하려합니다.

 

 

eventType에 왜 click이 오지 않을까..?!

문제 상황: 두 경우의 이벤트 핸들링

사용자가 상품 버튼을 클릭했을 때, 다음과 같은 시나리오를 생각했습니다:

1. 잔액이 부족한 경우
2. 잔액이 충분한 경우
3. 마우스 다운/업 이벤트와 클릭 이벤트의 상호작용

이러한 상황에서 마우스 업 이벤트의 동작에 가려져 클릭 이벤트가 동작하지 않는 상황이 발생했어요.

 

해결 방법: 조건부 이벤트 등록

먼저 기존 코드입니다.

  setEvent() {
    const { onSelect, onMouseDown, onMouseUp } = this.props;

    if (onSelect) {
      this.addEvent('click', '.product-button', (e) => {
        const button = e.target.closest('.product-button');
        if (!button) return;
        const productId = Number(button.dataset.id);
        onSelect(productId);
      });
    }

    if (onMouseDown) {
      this.addEvent('mousedown', '.product-button', onMouseDown);
    }

    if (onMouseUp) {
      this.addEvent('mouseup', '.product-button', onMouseUp);
    }
  }

 

변경된 코드입니다.

setEvent() {
  const { onSelect, onMouseDown, onMouseUp, product } = this.props;

  // 가격이 부족할 때만 mousedown/mouseup 이벤트 등록
  if (onMouseDown && this.state.balance < product.price) {
    this.addEvent('mousedown', '.product-button', () => {
      onMouseDown(product);
    });
    this.addEvent('mouseup', '.product-button', () => {
      onMouseUp();
    });
  } else {
    // 가격이 충분하거나 조건에 맞지 않으면 click 이벤트만 등록
    this.addEvent('click', '.product-button', (e) => {
      const button = e.target.closest('.product-button');
      if (!button) return;
      const productId = Number(button.dataset.id);
      onSelect(productId);
    });
  }
}

 

핵심 접근 방식

1. 조건부 이벤트 등록: 현재 상태에 따라 적절한 이벤트를 동적으로 바인딩합니다.
2. 이벤트 위임: closest() 메서드를 활용해 이벤트 버블링을 효율적으로 처리합니다. (글에는 없지만 component.js에서 처리)
3. 상태 기반 로직: balance와 product.price를 비교하여 이벤트 흐름을 제어합니다.