프로미스(Promise)는 자바스크립트에서 비동기 작업을 처리하기 위한 핵심 객체입니다. 프로미스를 사용하면 값이 언제 사용 가능해질지 미리 알 수 없는 상황에서도, 결과가 준비되었을 때 이를 처리할 수 있습니다. 대표적인 예로 서버에서 데이터를 가져오는(fetch) 작업이 있습니다.
프로미스의 세 가지 상태
프로미스는 생성된 시점부터 다음 세 가지 상태 중 하나를 가집니다.
- Pending(대기) – 아직 결과가 확정되지 않은 초기 상태
- Fulfilled(이행) – 작업이 성공적으로 완료되어 값을 반환한 상태
- Rejected(거부) – 작업이 실패하여 오류를 반환한 상태
대기 상태였던 프로미스는 이행 또는 거부 상태로 전환되며, 한번 확정된 상태는 다시 변경되지 않습니다.
JavaScript 프로미스 예제 코드
다음은 fetch API와 프로미스 체이닝(.then, .catch)을 활용해 사용자 목록의 username을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<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>위 버튼을 클릭하면 프로미스를 통해 username이 표시됩니다</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()가 호출되어 외부 API에 요청을 보내고, 즉시 프로미스 객체를 반환합니다. - 첫 번째
.then()에서 응답(response)을json()메서드로 변환합니다. - 두 번째
.then()에서 파싱된 데이터 배열을 순회하며 각 사용자의username을 화면에 추가합니다. - 요청 과정에서 오류가 발생하면
.catch()가 이를 잡아 alert 창으로 표시합니다.
실행 결과
위 코드를 실행하면 버튼과 안내 문구가 포함된 페이지가 나타납니다.
'CLICK HERE' 버튼을 클릭하면, 프로미스가 이행(fulfilled)되면서 API에서 받아온 사용자 이름들이 빨간색 텍스트로 화면에 출력됩니다.
마무리
프로미스는 콜백 지옥(callback hell)을 방지하고 비동기 코드를 더 읽기 쉽게 만들어 주는 강력한 도구입니다. 최신 자바스크립트에서는 프로미스를 더욱 간결하게 다룰 수 있는 async/await 문법도 함께 활용되고 있으니, 프로미스 개념을 확실히 익혀두면 비동기 프로그래밍 실력이 크게 향상될 것입니다.