[프리온보딩 프론트엔드 챌린지 1월] 비동기 코드 다루기

 

프리온보딩 챌린지 강의 1회 차 때 멘토님께서 비동기에 대해 살짝궁 말씀하셨다. 아니나 다를까 과제 중 비동기 함수 때문에 애를 먹었다.

 

이번 회고는 비동기에 대해 간략하게 정리하려 한다.

 

 

[ 현재 문제 ]

getToDo API는 axios를 사용해 DB로 사용하는 firebase와 HTTP 통신을 하여 얻은 for...in 반복문을 사용하여 배열 데이터 데이터로 반환한다.

 

 

getToDo API를 호출해  반환하는 값을 변수 toDoList에 담았으며, 이후 store에 dispatch하여 반환 값을 저장하려고 했지만, 에러 메시지만 계속 확인할 수 있었다. 때문에 dispatch하기 전 변수 toDoList에 담긴 값을 콘솔로 확인해 봤더니 pending 상태의 Promise를 확인하게 되었다.😨

 

우선 해당 문제를 해결한 결과를 보기 전에 Promise에 대해 한 번 더 정리하고자 한다.

 

 

 

[ 비동기 ]

 

axios는 결괏값을 Promise로 반환한다는 것은 이전에 들은 적이 있어 기억하고 있었다. 때문에 Promise에 대해 살펴보면 해당 문제를 해결할 수 있을 것이라 생각했다.

 

Promise는 자바스크립트의 비동기 처리에 사용되는 객체이며, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 

 

비동기에 대해 간략하게 정리하면 아래와 같다.

 

이때 비동기 코드는 아래의 세 가지의 상태를 가질 수 있다. 

• Pending은 현재 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생했음을 의미한다.
• Fulfilled는 비동기 작업이 의도한 대로 정상적으로 완료되었음을 의미한다.
• Rejected는 비동기 작업이 어떠한 이유로 인해 실패했음을 의미한다.

Rejected의 이유로는 서버가 응답을 하지 않는다거나 시간이 너무 오래 걸려 자동으로 취소되는 것을 들 수 있다.

 

이렇게 비동기 작업은 세 가지의 상태를 가지며, 한 번 실패하면 해당 작업은 그렇게 끝이 난다. 그리고 Pending 상태에서 Fulfilled 상태로 변화하는 과정을 resolve라고 하며 Rejected 상태로 변화하는 과정을 reject라고 한다.

 

일단 resolve든 reject든 서버와의 통신 결과를 다음 코드들이 동기식으로 기다릴 수는 없으니 비동기, 즉 해당 코드의 결과가 나오기 전에 그냥 다음 코드가 실행된다.

 

 

위의 내용을 기반으로 문제 코드를 다시 보면 내가 정리한 것은 이렇다.

 

getToDo API는 비동기 API이며, getToDo API에서 반환하는 값을 변수 toDoList에 할당하고 있다. 문제의 원인은 바로 반환 값을 변수 toDoList에 할당하는 부분이다. 

 

getToDo API가 비동기이기 때문에 axios 통신이 완료되고 값을 반환하기 전에 변수 toDoList에 반환 값을 할당했기 때문이다.

 

즉, 변수 toDoList에 할당된 것은 비동기 코드의 resolve로 반환하는 값이 아닌 아직 마무리가 되지 않은 Promise인 것이다.

 

이러한 문제는 콜백 함수로 해결할 수 있었다. 

 

자바스크립트 비동기 처리와 콜백 함수

 

문제 해결에 큰 도움을 준 블로그에서 비동기 함수에 전달하는 콜백 함수의 비유는 다음과 같았다.

 

콜백 함수의 동작 방식은 일종의 식당 자리 예약이며, 예약한 식당에서 자리가 나면 대기자 명단에 있는 이름으로 연락을 한다. 이때 연락을 받은 시점이 콜백 함수가 호출되는 시점이다. 
손님 입장에서는 자리가 났을 때만 연락이 오기 때문에 기다릴 필요 없이 다른 일을 하면 된다. 이때 자리가 준비됐을 시점이 데이터가 준비된 시점이다.

 

즉, 비동기 함수에 콜백 함수를 전달하여 해당 콜백 함수의 인수로 비동기 코드가 완료되고 완료된 결과 데이터를 해당 콜백 함수에 넣어주게 되면 무작정 기다리다 행패보지 않는 것이다.

 

 

위의 내용을 기반으로 아래와 같이 수정해 주었다.

 

 

[ 수정된 코드 ]

 

 

dispatch 함수를 getToDo API에 전달하여 비동기 코드가 완료되면 콜백 함수의 인수로 데이터를 전달하도록 해주었더니 문제 해결!

 

 

 

🔥 문제 해결하는데 애좀 먹었지만 그래도 오늘도 하나 배워가는 느낌이라 기분은 좋다.