[typescript] 타입스크립트에서의 비동기 이벤트 처리 방법

14 Dec 2023

typescript

타입스크립트는 자바스크립트의 상위 집합 언어이며, 비동기적으로 발생하는 이벤트를 다루는 데 매우 효과적입니다. 이번 블로그에서는 타입스크립트에서의 비동기 이벤트 처리 방법에 대해 알아보겠습니다.

비동기 이벤트란?

비동기 이벤트란 코드의 실행 흐름과 독립적으로 발생하는 이벤트를 의미합니다. 대표적인 예로는 클릭, 네트워크 요청, 파일 로딩 등이 있습니다.

비동기 이벤트 처리 방법

1. 콜백 함수

가장 기본적인 방법으로, 이벤트가 발생할 때 실행할 콜백 함수를 등록합니다. 타입스크립트에서는 다음과 같이 사용할 수 있습니다.

element.addEventListener('click', (event) => {
  // 콜백 함수에서 이벤트 처리
});

2. 프로미스 (Promise)

프로미스는 비동기 작업의 결과를 나타내는 객체로, 성공 또는 실패 시 처리 방법을 지정할 수 있습니다. 타입스크립트에서는 다음과 같이 사용할 수 있습니다.

function fetchData(): Promise<Data> {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 작업 성공 */) {
      resolve(data); // 성공 시
    } else {
      reject(error); // 실패 시
    }
  });
}

fetchData().then((data) => {
  // 성공 시 처리
}).catch((error) => {
  // 실패 시 처리
});

3. async/await

async/await는 프로미스를 기반으로 하는 비동기 처리를 보다 간편하게 작성할 수 있도록 해줍니다. 타입스크립트에서는 다음과 같이 사용할 수 있습니다.

async function fetchData() {
  try {
    const data = await fetchDataFromServer();
    // 성공 시 처리
  } catch (error) {
    // 실패 시 처리
  }
}

결론

타입스크립트에서는 콜백 함수, 프로미스, async/await 등을 활용하여 비동기 이벤트를 효과적으로 처리할 수 있습니다. 각각의 방법에 대해 장단점을 고려하여 상황에 맞게 활용하는 것이 중요합니다.

이상으로 타입스크립트에서의 비동기 이벤트 처리 방법에 대해 알아보았습니다.

참고 자료

MDN Web Docs - JavaScript