[React] Promise란?

🔥 Promise란?

React에서 Promise는 비동기 처리에 활용되는 객체로, 주로 웹 서비스를 구현할 때 원활한 데이터 통신을 위해 활용된다.
웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 사용된다.
즉, Promise 객체는 비동기 로직을 동기처럼 사용할 수 있는 기능을 가진다.

비동기 로직인 A,B,C 로직이 있을 경우 Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 A, B, C 순서대로 출력이 가능하다.

📖 Promise의 상태

Promise의 상태는 3가지 상태가 있다.

• Pending(대기) - 비동기 로직 처리의 미완료 상태
• Fulfilled(이행) - 비동기 로직 처리가 완료된 상태로 Promise 결과값 반
• Rejected(실패) - 비동기 로직 처리의 실패 또는 오류 상태

1. Pending

new Promise();

new Promise((resolve, reject) => {});

Promise 객체를 생성하면 Pending(대기) 상태이며, 인자는 resolve(실행)와 reject(실패)를 가진다.

2. Fulfilled

// resolve()를 통해 Promise 실행
function getData(){
	return new Promise( (resolve, reject) => {
    	let data = 10;
        resolve(data);
    })
}

getData().then((resolvedData) => console.log(resolvedData));

Promise 객체를 생성 후 resolve에 parameter를 넣어주면 Promise가 이행상태로 넘어간다. 이후 then()을 활용해 결과 값을 받을 수 있다.

3. Rejected

// reject를 호출해 고의적 실패로 연결
function getData(){
	return new Promise( (resolve, reject) => {
    	reject(new Error("This is rejected!"));
    })
}

getData().catch((err) => console.log(err));

Promise 객체인 reject 인자는 호출 시 실패 상태가 된다. 이후 catch()를 활용해 결과값을 받고 예외를 확인할 수 있다.

✨ axios나 thunk와 같은 api를 호출할 때 promise를 통해 호출된다.

출처 : https://narup.tistory.com/215