promise와 async/await 모두 자바스크립에서 비동기 코드 처리에 사용된다.
async
함수는 비동기 작업을 수행하고,await
키워드는 비동기 작업이 완료될 때까지 기다리며,promise
는 비동기 작업의 결과를 나타낸다.
또,promise.then
을 사용하는 것보다async/await
를 사용하기 간편하며 어떤 지점에서 에러가 발생했는지 쉽게 찾을 수 있다.
promise
에는 Pending(대기), Fulfilled(이행), Rejected(실패) 3가지 상태가 있다.
Pending
, 완료 되었다면 Fulfilled
, 실패하거나 오류가 발생하였다면 Rejected
상태를 갖는다.const condition = true;
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('resolved');
} else {
reject('rejected');
}
});
promise
.then((res) => {
console.log(res);
})
.catch((error) => {
console.error(error);
});
resolve
를 호출하여 then()
을 통해 콘솔 로그로 값을 받을 수 있고 false일 경우 reject
를 호출하여 catch
를 통해 에러 값을 받는다.then()
과 catch()
문의 체이닝을 통해 비동기 로직의 성공 여부에 따른 분기 처리가 가능하다.promise
를 좀 더 편하게 사용할 수 있는 비동기 처리 문법이다.
Promise
의 단점은 .then()
의 지옥을 맛볼 수 있다.
await
키워드를 만나면 promise
가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.
// await는 async 함수 안에서만 동작합니다.
let value = await promise;
await
는 async
함수 안에서만 동작한다.(async () => {
const condition = true;
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('resolved');
} else {
reject('rejected');
}
});
try {
const result = await promise;
console.log(result);
} catch (err) {
console.error(err);
}
})();
async/await
은 promise
가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져집니다.promise
가 거부 되기 전에 약간의 시간이 지체되는 경우가 있다. 이런 경우엔 await가 에러를 던지기 전에 지연이 발생한다.await
가 던진 에러는 throw
가 던진 에러를 잡을 때처럼 try..catch
를 사용해 잡을 수 있다.라이프사이클은 컴포넌트 생명주기를 말하며,
mount
,update
,unmount
로 구분할 수 있다.
컴포넌트 생명주기는 컴포넌트가 생성되고, 사용되고, 소멸되기까지 과정을 말한다. 라이프사이클 과정에서 호출되는 메소드들이 있는데componentDidMount()
는 컴포넌트가 생성될때 한 번 호출 되며,componentDidUpdate
는 컴포넌트의 속성 값 혹은 상태 값이 변경 되었을때,componentWillUnMount
는 컴포넌트가 소멸될 때 호출된다. 또한render
메소드는 초기 화면을 그려줄 때와 업데이트 시에 호출된다.