프론트엔드 개발/Interview

Promise의 기능과 필요한 이유

하이고니 2023. 2. 10. 09:35

Promise란?

- 자바스크립트 비동기 처리에 사용되는 객체. 비동기 처리의 단점을 보완하여 동기적으로 처리할 수 있게 도와준다.

 

*자바스크립트의 비동기 처리란?

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것.

 

Promise가 필요한 이유

- 우리는 서버에서 받아온 데이터를 원하는 순서대로 처리하고 싶기 때문에

 

Promise의 장점

- Promise는 .then() .catch() 등 PromiseAPI를 사용할 수 있어서 코드의 양을 줄이고 가독성을 증가시킬 수 있다.

 

Promise의 세 가지 상태

- pending: 대기 - 비동기 처리 로직이 아직 완료되지 않은 상태

- fulfilled: 이행 - 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태

- rejected: 실패 - 비동기 처리가 실패하거나 오류가 발생한 상태

 

Promise와 Callback의 차이점

- Callback 함수는 함수 안에서만 결과값 처리를 할 수 있지만 Promise는 비동기 로직에서 처리된 결과값이 Promise 객체에 저장되기 때문에 로직 밖에서도 사용 가능하다.

- Callback 함수는 함수 내부에서 연달아 다음 함수를 호출하기에 가독성이 떨어지지만 Promise 함수는 PromiseAPI를 사용해 가독성을 높여준다.

 

 

나만의 언어로 정리해보기 

 

Promise는 자바스크립트의 비동기 처리에 사용되는 객체입니다.

AJAX 통신을 할 때, 코드는 우리 눈에 보이는 것처럼 작동하지 않습니다. 예를 들어 윗 줄에서 fetch나 axios로 데이터를 요청하고, 그 밑에서 그 데이터를 콘솔로 찍었다고 가정해보면, 콘솔에는 해당 데이터가 찍혀야할 것 같습니다. 하지만 결과는 undefined입니다. 그 이유는 컴퓨터가,, 데이터를 받아올 때까지 기다리지 않고! 다음 코드를 실행하기 때문입니다. 이런 식으로 특정 로직의 실행이 끝날 때까지 기다려주지 않고, 나머지 코드를 먼저 실행하는 것이 비동기 처리입니다. 우리는 우리가 원하는 순서대로 코드를 실행시키고 싶습니다. 그럴 때 콜백 함수를 쓸 수는 있지만, 코드가 길어지고 가독성이 떨어진다는 단점이 있습니다. 그래서 then, catch 등의 PromiseAPI를 통해 깔끔하게 코드를 작성할 수 있는, Promise를 주로 사용합니다.

 

 

병렬적으로 데이터를 받아올 때 promiseAll 말고 방법이 있나요?