브라우저 이벤트 핸들러와 async/await: 핵심 이해 가이드

[yunseorim1116]

브라우저 이벤트 핸들러와 async/await: 핵심 이해 가이드

왜 이벤트 핸들러에서 async/await를 사용하면 문제가 될까?

이벤트 핸들러에서 async/await를 사용할 때 발생하는 문제와 그 이유를 명확하게 이해해 봅시다.

핵심 개념 정리

1. 이벤트 핸들러의 호출자는 브라우저다

button.addEventListener('click', myHandler);

• 여기서 제가 처음에 헷갈렸던 것, addEventListener는 호출자가 아닙니다. addEventListener는 단지 핸들러를 등록만 하는 메서드입니다.
• 실제로 myHandler를 호출하는 것은 사용자 이벤트(클릭 등) 발생 시 브라우저의 내부 이벤트 처리 시스템입니다.
• 진짜 호출자는 브라우저입니다.

2. async 함수는 항상 Promise를 반환한다

async function example() {
  return "결과";  // Promise.resolve("결과")로 자동 변환
}

• async 키워드가 붙은 함수는 명시적으로 Promise를 반환하지 않아도 항상 Promise 객체 반환
• 즉, 이벤트 핸들러에 async를 붙이면 해당 함수는 브라우저에게 Promise를 반환하게 됨

3. await의 동작 원리

async function example() {
  console.log("1");
  await fetchData();  // 함수 실행 일시 중단
  console.log("2");   // Promise 해결 후 실행
}

• await 키워드를 만나면 함수 실행이 일시 중단됨
• 중요: 함수 실행은 중단되지만, 함수 자체는 호출자에게 Promise를 반환하고 종료됨
• Promise가 해결되면 중단되었던 지점부터 실행 재개

문제의 정확한 원인

다음 코드를 살펴보세요:

button.addEventListener('click', async (event) => {
  event.preventDefault(); // 작동함
  
  const data = await fetchData(); // 함수 실행 일시 중단
  
  processData(data); // Promise 해결 후 실행
});

실행 순서:

1. 사용자가 버튼 클릭
2. 브라우저가 이벤트 핸들러 호출
3. event.preventDefault() 실행 (이 시점에서는 정상 작동)
4. await fetchData() 실행:
   • fetchData()가 Promise 반환
   • 이벤트 핸들러 함수가 이 Promise를 브라우저에 반환하고 종료됨
   • 함수의 나머지 부분은 실행이 일시 중단됨
5. 브라우저는 반환된 Promise를 특별히 처리하지 않음
6. 브라우저는 이벤트 핸들러가 완료되었다고 간주하고 이벤트 처리 진행
7. 나중에 Promise가 해결되면 processData(data) 실행
   • 하지만 이미 브라우저의 이벤트 처리는 완료된 상태

자주 혼동되는 부분 정리

1. "함수 실행이 일시 중단된다"는 의미:

   • 함수의 실행 컨텍스트(실행 상태)가 보존되고 일시 중단됩니다.
   • 하지만 함수 자체는 Promise를 반환하고, 호출 스택에서 제거됩니다.

2. "브라우저는 Promise를 특별히 처리하지 않는다"는 의미:

   • 브라우저(즉, 이벤트 호출자)의 이벤트 처리 시스템은 이벤트 핸들러가 반환하는 값(Promise 포함)을 무시합니다.
   • Promise가 나중에 해결되기를 기다리지 않고 즉시 다음 단계 진행합니다.

해결책: then() 방식 사용하기

button.addEventListener('click', (event) => {
  event.preventDefault(); // 작동함
  
  fetchData().then(data => {
    processData(data);
  });
  
  // 이 시점에서 이벤트 핸들러가 완전히 종료됨
});

이 방식이 작동하는 이유:

• 이벤트 핸들러 함수가 동기적<즁요> 으로 완전히 실행 완료됩니다.
• preventDefault()가 이벤트 처리 과정에서 적절한 시점에 처리 됩니다.
• 비동기 작업은 핸들러 >완료< 후 콜백으로 처리되므로 브라우저의 이벤트 처리와 충돌하지 않습니다.

key: 이미 완료된 상태(then) 과, 일시 중지된 상태(await)를 구분하기.