자바스크립트의 Promise(프로미스)는 생성 시점에 그 결과값이 아직 알려지지 않은 비동기 작업(asynchronous operation)을 처리하기 위해 사용되는 객체입니다. 서버에서 데이터를 요청하거나 시간이 오래 걸리는 작업을 수행할 때, 결과가 준비될 때까지 기다린 후 성공 또는 실패에 따라 후속 동작을 실행할 수 있도록 도와줍니다.
Promise의 3가지 상태
Promise 객체는 다음 세 가지 상태 중 하나를 가집니다.
- Pending(대기) — 비동기 작업이 아직 완료되지 않은 초기 상태입니다.
- Fulfilled(이행) — 작업이 성공적으로 완료되어 결과값이 전달된 상태입니다.
- Rejected(거부) — 작업이 실패하여 에러가 발생한 상태입니다.
자바스크립트 Promise 예제 코드
아래 예제는 fetch API와 Promise 체인(.then(), .catch())을 활용해 외부 API에서 사용자 목록을 가져온 뒤, 각 사용자의 이름(username)을 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Promises</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to display username using promises
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((result) => {
result.forEach((element) => {
sampleEle.innerHTML += element.username + "<br>";
});
})
.catch((err) => alert(err));
});
</script>
</body>
</html>
코드 동작 방식 살펴보기
- fetch() 호출 — 지정된 URL에 HTTP 요청을 보내고, 즉시 Promise 객체를 반환합니다. 이때 응답 데이터는 아직 도착하지 않았으므로 Promise는 'Pending' 상태입니다.
- 첫 번째 .then() — 응답(response)이 도착하면
response.json()메서드를 통해 JSON 형식으로 변환합니다. 이 역시 새로운 Promise를 반환합니다. - 두 번째 .then() — 변환된 데이터(result)를 받아
forEach로 각 사용자의 username을 화면에 추가합니다. - .catch() — 위 과정 중 어느 단계에서든 에러가 발생하면 해당 에러를 받아 alert 창으로 표시합니다.
실행 결과
페이지가 로드된 초기 화면입니다.
'CLICK HERE' 버튼을 클릭하면 Promise가 이행(fulfilled)되면서 다음과 같이 사용자 이름 목록이 화면에 표시됩니다.
마무리
이처럼 Promise는 콜백 지옥(callback hell)을 피하고 비동기 코드를 더 읽기 쉽고 관리하기 편하게 만들어 주는 강력한 도구입니다. 나아가 async/await 문법을 사용하면 Promise 기반 코드를 더욱 직관적으로 작성할 수 있으니 함께 학습해 보시길 권장합니다.