오늘은 데모데이 10기분들의 프로젝트 과제물을 보는 시간이 있어 callback함수와 promise 그리고 async& await에 대한 보충수업을 들었다.
콜백함수란 2가지의 종류가있다.
첫번째 함수의 인자로서의 역할을 하는 콜백함수와 두번째 이벤트리스너로서의 역할을 하는 콜백함수가 있다.
콜백함수를 사용하는 이유는 대상 함수안에서 실행시키고 싶은 로직을 내가 작성해서 대상함수로 보내줄 수 있기 때문이다. 대상함수로부터 받아온 값을 인 자로 처리하여 이제 기능하는 것이다.
콜백함수는 함수 값을 인자로 받아 다시 변수가되고 반복을 하기 때문에 아래의 사진과같이 안쪽으로 코드가 파고들어가며 가독성을 떨어뜨리고 이러한 콜백지옥에 빠질 수 있는 문제점이 생긴다.
이러한 문제를 해결하기위해 promise 와 async& await이 생겼다. 작동하는데는 문제가 전혀 없지만 길이가길어질수록 코드가 안쪽으로 파고들어가기 때문에 유지보수에 어려움이 클 것이다.
ES6에서 promise를 지원하는 라이브러인 axios를 이용할 수 있다.
promise는 then기능을 이용하여 콜백지옥 문제점을 해결하는데 then 이참값일 경우 성공한반응을 가지고오고 거짓일 경우 실패한 반응을 가져온다.
이를 코드로 살펴보면
axios밑으로 .get과 .then을 이용하여 같은라인으로 코드를 작성함으로써 가독성과 유지보수가 용이하도록 바꾸었다. 그러나 막상 실행을 해보면 순서가 뒤죽박죽으로 실행되는 문제점이 보인다. 이를 해결기위해 이보다 한 단계 더 발전한 것이 async&await이다
코드를 보면
코드도 훨씬 가독성도 좋아지고 유지보수도 쉬울뿐 만아니라 promise만 사용했을 때 생겼던 문제인 순서 까지도 보장이 되는 것을 볼 수 있다.
async await을 쓸땐 서로가 단독으로 적혀서는 사용이 안되고 반드시 함께 쓰여야지 기능이 구현되는 것을 까먹지 않아아한다.
