프로미스(Promise)는 자바스크립트에서 비동기 작업을 다루는데 사용되는 객체입니다. 비동기 작업을 처리할 때 콜백(callback) 함수를 사용하는 대신 프로미스를 사용하면 코드를 더욱 간결하고 가독성 있게 작성할 수 있습니다. 이번 글에서는 프로미스의 사용 예시와 실제 적용 사례에 대해 알아보겠습니다.
프로미스 사용 예시
프로미스를 사용하는 가장 기본적인 형태는 다음과 같습니다.
const promise = new Promise((resolve, reject) => {
// 비동기 작업 수행
// 작업이 성공적으로 완료된 경우 resolve 호출
// 작업이 실패한 경우 reject 호출
});
promise
.then(result => {
// 작업이 성공적으로 완료된 경우 실행되는 핸들러
})
.catch(error => {
// 작업이 실패한 경우 실행되는 핸들러
});
위 예시에서는 new Promise()를 사용하여 프로미스 객체를 생성합니다. 이때 생성자 함수의 인자로는 비동기 작업을 수행하는 함수를 전달해야 합니다. 이 함수는 resolve와 reject라는 두 개의 콜백 함수를 인자로 받습니다. 작업이 성공적으로 완료된 경우 resolve를 호출하고, 작업이 실패한 경우 reject를 호출합니다.
promise.then()을 사용하여 작업이 성공적으로 완료된 경우 실행되는 핸들러를 등록할 수 있습니다. promise.catch()를 사용하여 작업이 실패한 경우 실행되는 핸들러를 등록할 수도 있습니다.
프로미스 실제 적용 사례
프로미스는 비동기 작업을 다루는데 매우 유용한 도구입니다. 예를 들어, 서버에서 데이터를 가져와 화면에 표시하는 작업을 프로미스를 사용하여 다음과 같이 처리할 수 있습니다.
function fetchData() {
return new Promise((resolve, reject) => {
// 서버에서 데이터를 가져오는 비동기 작업 수행
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}
fetchData()
.then(data => {
// 데이터를 성공적으로 가져온 경우 실행되는 핸들러
renderData(data);
})
.catch(error => {
// 데이터를 가져오는데 실패한 경우 실행되는 핸들러
displayError(error);
});
위 예시에서는 fetchData()라는 함수를 정의하여 데이터를 가져오는 작업을 프로미스로 처리하고 있습니다. 이 함수에서는 fetch()를 사용하여 서버에서 데이터를 가져오는 비동기 작업을 수행하고 있습니다. 데이터를 성공적으로 가져온 경우 resolve를 호출하고 데이터를 실패한 경우 reject를 호출합니다.
fetchData() 함수를 호출한 후 then을 사용하여 데이터를 성공적으로 가져온 경우 실행되는 핸들러를 등록하고, catch를 사용하여 에러가 발생한 경우 실행되는 핸들러를 등록합니다. 이렇게 프로미스를 사용하면 비동기 작업을 구조적으로 다룰 수 있으며, 코드를 간결하고 가독성 있게 작성할 수 있습니다.
결론
프로미스는 자바스크립트에서 비동기 작업을 처리하는데 있어 매우 유용한 도구입니다. 예시를 통해 프로미스의 기본적인 사용 방법을 살펴보았고, 실제 프로미스를 적용한 예시를 통해 그 활용성을 알아보았습니다. 프로미스를 잘 활용하면 비동기 작업을 효율적이고 가독성 있게 다룰 수 있으므로, 자바스크립트 개발에 활용해보시기 바랍니다.