async/await

이전 게시글에서 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/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는 동기적인 흐름이 필요한 비동기 코드들을 간결하고 가독성이 좋도록 해주는 좋은 문법이다!!