이전 게시글에서 promise를 정리하다가
비동기 처리가 나왔다. 그래서 비동기를 동기적으로 처리해줄 수 있게해주는 async/await에 대해서 포스팅해보려고 한다.(사실 정리글이기보단, 이전에 썼던 코드를 async/await처리했으면 더 좋았을껄 하면서 수정하는 글이다.)
일단 async/await를 적용시킬 코드는
const createCommentHandler = () => {
const body = {
board_id: ArticleId,
content: Comment,
};
createComment(body).then(res => {
console.log(res.data)
setComment('');
listComment(ArticleId).then(res => {
setComments(res.data.data);
});
});
};
이 코드이다.
크게 어렵지 않은 로직이다. createCommentHandler
를 작동시키면
createComment
가 작동하여 댓글 작성API를 호출하고
listComment
로 댓글 목록들을 다시 불러와서 댓글을 작성한 시점에서 최신화를 시켜준다.
클라이언트상에서 업데이트를 유지하는게 아니라 매번 API를 호출하여 댓글의 최신상태를 유지시킨 이유는 사용자가 댓글을 쓰는 사이 다른 사용자가 댓글을 달았을 때 그 댓글을 보여주기 위함이다.
아무튼 지금의 코드는 가독성이 좋지않다. 비동기요청 안에 비동기요청이다.
이게 두번이어서 읽기 쉽지 3~4번이었으면 완전 더러웠을 것이다.
async/await는 지금과 같은 코드를 깔끔하게 정리해주는 데 도움을 주는 문법이다.
비동기 요청을 동기적으로 만들어주는 비동기 코드가 되겠다!!
그러니까 전체적으로는 비동기요청인데 안에서 보면 각각의 비동기 요청들을 동기적으로 요청하는 것이다.
async function cre_li_comment() {
const body = {
board_id: ArticleId,
content: Comment,
};
try {
await createComment(body);
setComment('');
const res = await listComment(ArticleId);
setComments(res.data.data);
} catch (err) {
console.log(err);
}
}
const createCommentHandler = () => {
cre_li_comment()
};
이렇게 바뀌었다.
여기서 실제 작동하는 부분은 try구문 안쪽이다
await createComment(body);
setComment('');
const res = await listComment(ArticleId);
setComments(res.data.data);
동기적으로, 성공하는 부분만 보여주기때문에 훨씬 코드 보기가 좋아졌다.
댓글작성 -> 상태초기화 -> 댓글리스트 불러오기
를 바로 알 수 있을 것만같은 코드이다.
이처럼 async/await는 동기적인 흐름이 필요한 비동기 코드들을 간결하고 가독성이 좋도록 해주는 좋은 문법이다!!