Promise의 개념과, 콜백함수와의 차이

Seungmin Shin·2022년 1월 4일
1

Promise란 무엇인가

비동기의 개념에 대해서 알고 있는가?

기본적으로 코드가 위에서 아래로 순차적으로 탐색되는건 알고있을것이다.
여기서 비동기 처리란, 코드를 순차적으로 탐색하다가 특정한 코드의 실행이 이루어질때,
해당 코드의 실행이 전부 이루어질때까지 다음코드의 탐색이 멈추는것이 아닌, 기다리지 않고
바로 다음 코드의 탐색을 먼저 실행하는 자바스크립트의 특성이다.

비동기적 처리는 보편적으로 API 요청시에 많이 사용된다.
API 요청을 할때 요청을 하고 응답을 받아야하는데, 그 시간은 요청마다 다르고, 또 그 응답을 기다리는시간
동안 그 다음 코드가 실행되지 않기때문에 비동기 처리를 하여 요청은 요청대로, 탐색은 탐색대로 하게 하는것
이다. 하지만 그저 비동기적 처리라면 이 과정에서 문제가 발생하게 된다.

기본적으로 API코드의 구성은 요청 - 실행 으로 이루어지는데,
처음 요청을 하고 데이터를 받는다고 할때, 비동기적 처리로 데이터가 미처 받아지기도 전에 그 다음
응답의 코드로 넘어가게 된다. 그렇다면 결과는? 데이터를 받지도 않았는데 받은 데이터를 이용한 응답코드를
실행한다면 제대로 된 값을 얻지 못할것이다.

이때 사용되는것이 Promise다.
Promise 는 총 세가지로 구성이 되어있다 / 대기, 이행, 실패
비동기 처리가 아직 완료되지 않은 상태를 대기 상태로 가지고,
데이터가 정상적으로 받아와졌다면 이행의 상태를 가지게 된다.
그리고 반대로 정상적으로 가져와지지 못했다면 실패의 상태를 반환한다.

각각의 상태에 따라 결과값을 반환하기때문에 우리는 큰 변수가 없다면 정상적으로 데이터를 받아올 수 있다.

그럼 이 Promise 는 콜백함수와 어떤 차이를 가지고 있는것일까?

일단은 Promise 가 콜백함수의 문제점을 보완하여 생긴것이라는것을 알아야한다.
콜백지옥 이란 말을 들어봤는가? 콜백함수안에 계속해서 콜백함수가 생겨나 빠져나올 수가 없다해서
콜백지옥이라고 한다. 왜 이런 현상이 발생하는것일까?

콜백함수는 그 함수의 외부로 데이터가 나가게 된다면 해당 데이터는 함수내에서 읽을 수 없게 된다.
그말인즉슨, 콜백함수내에서 작업이 이루어진다면 그 함수 내에서만 작업이 가능하다는것이다.
뭐 함수내부의 작업이 그저 변수 몇개, 코드 몇줄로 이루어지는 작업이라면 큰 문제는 없겠지만.
그 내부에서 또 다른 함수들이 줄줄이 생겨난다면, 함수안에 함수, 또 함수안에 함수들이 생겨나게 될것이다.
그러다 보면 코드는 점점 옆으로 늘어날것이고

이런식의 콜백지옥이 탄생하게 되는것이다.

그래서 Promise 가 생겨났다, Promise 는 객체의 개념을 가진다, 그렇기 때문에 받은 응답을 객체에
저장할 수 있게 되었다. Promise를 쓰면 같이 딸려오는 then으로 그 응답값을 사용할 수 있게 되고
then은 내부의 내부로 사용을 하지 않아도 되기때문에 깊이의 차이가 확연하게 드러난다.

이것이 Promise 와 콜백함수의 개념이다.

profile
Frontend Developer

0개의 댓글