자바스크립트 비동기 처리와 콜백 함수 이해하기

자바스크립트는 비동기 처리를 통해 하나의 스레드 내에서 여러 작업을 동시에 수행할 수 있는 능력을 가지고 있습니다. 이 비동기 처리 방식은 특히 네트워크 요청과 같은 시간이 오래 걸리는 작업에서 유용하게 사용됩니다. 비동기 처리를 적절히 활용하면 시스템 자원을 효율적으로 관리하고 사용자 경험을 개선할 수 있습니다.

비동기 처리의 필요성

자바스크립트는 싱글 스레드 언어이기 때문에, 여러 작업을 동시에 실행하기 위해서는 비동기 처리 기법이 필수적입니다. 비동기 작업이란 특정 작업이 완료될 때까지 기다리지 않고, 다음 코드 실행을 허용하는 방식입니다. 이런 접근법은 웹 애플리케이션에서 서버와의 통신이나 파일 시스템 작업 등 시간이 소요되는 작업을 수행할 때 특히 중요한 역할을 합니다.

콜백 함수의 이해

비동기 처리를 위해 가장 먼저 사용되는 방법 중 하나가 바로 콜백 함수입니다. 콜백 함수는 비동기 작업이 완료된 후 실행되는 함수로, 비동기 함수의 인자로 전달되어 작업이 끝나면 호출됩니다. 예를 들어, 서버로부터 데이터를 요청하는 함수에 콜백 함수를 전달하면 서버의 응답을 기다리지 않고 다른 작업을 수행할 수 있습니다.

그러나 콜백 함수를 여러 개 중첩하여 사용할 경우 ‘콜백 지옥’이라고 불리는 문제가 발생할 수 있습니다. 이는 복잡한 코드 구조로 인해 가독성이 떨어지고, 에러 처리 역시 어려워질 수 있다는 단점을 가지고 있습니다. 아래와 같은 형태로 중첩 코드가 발생할 수 있습니다.

• 비동기 작업 1 – 콜백
• 비동기 작업 2 – 콜백
• 비동기 작업 3 – 콜백

이런 문제를 해결하기 위해 자바스크립트는 프로미스(Promise)라는 개념을 도입했습니다. 프로미스는 비동기 작업의 완료 상태를 나타내는 객체로, ‘대기 중(Pending)’, ‘이행됨(Fulfilled)’, ‘거부됨(Rejected)’ 세 가지 상태를 가집니다. 프로미스를 사용하면 비동기 작업의 성공과 실패를 보다 간결하게 처리할 수 있습니다.

프로미스 사용법

프로미스를 생성하려면, Promise 생성자 함수를 사용하여 새로운 프로미스 객체를 생성합니다. 이때 두 개의 매개변수를 받는 콜백 함수가 필요합니다. 첫 번째 인자는 비동기 작업이 성공했을 때 호출되는 resolve 함수이고, 두 번째 인자는 실패했을 때 호출되는 reject 함수입니다.

프로미스의 사용 예시는 다음과 같습니다.

const myPromise = new Promise((resolve, reject) => {
 // 비동기 작업 수행
 const isSuccess = true; // 성공 여부 판단
 if (isSuccess) {
  resolve('작업 성공');
 } else {
  reject('작업 실패');
 }
});

프로미스 객체는 .then() 메소드를 사용하여 비동기 작업이 성공했을 경우의 후속 처리를 정의하고, .catch() 메소드를 통해 실패했을 경우의 처리를 정의할 수 있습니다. 예를 들어 다음과 같은 방식으로 사용할 수 있습니다.

myPromise
 .then((result) => {
  console.log(result); // 성공 시 처리
 })
 .catch((error) => {
  console.error(error); // 실패 시 처리
 });

async / await의 도입

ES2017에 추가된 async/await 문법은 비동기 코드를 더욱 간결하고 직관적으로 작성할 수 있게 도와줍니다. async 키워드가 붙은 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스의 결과를 기다리는 역할을 합니다.

async/await를 사용하면 다음과 같은 형태의 코드를 작성할 수 있습니다.

async function fetchData() {
 try {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
 } catch (error) {
  console.error('에러 발생:', error);
 }
}

위의 코드에서 볼 수 있듯이, async/await를 사용하면 비동기 코드를 마치 동기 코드처럼 읽기 쉽게 작성할 수 있습니다. 이는 가독성을 높이고 유지보수를 용이하게 합니다.

결론

자바스크립트에서 비동기 처리는 매우 중요하며, 이를 통해 사용자 경험을 개선할 수 있습니다. 콜백 함수, 프로미스, async/await와 같은 다양한 비동기 처리 방식들이 존재하며, 각 방식마다 장단점이 있습니다. 상황에 맞는 적절한 비동기 처리 방법을 선택하고 활용하는 것이 중요합니다. 이러한 기법들을 잘 이해하고 활용한다면, 더욱 효율적이고 유연한 자바스크립트 코드를 작성할 수 있을 것입니다.

자주 묻는 질문 FAQ