{JS} => 콜백지옥 탈출(Callback Hell Escape) (1)

SEUNGJUN·2022년 2월 19일
0
post-thumbnail

콜백함수란?

함수의 파라미터로, 함수를 보낸다.
함수가 실행되는 도중에 호출되어서 결과값을 처리해준다.

내용을 찾아보고 정의를 해봤는데 머릿속으로는 이해가 가는데 풀어서 설명을 해보려고 하니 확 와닿는다는 느낌은 받지 못했다.

한번 일상생활에서 접할 수 있는 상황을 통해서 알아보도록 하자.

회사에서 퇴근을 하고 치킨을 먹는다고 하고, 퇴근전에 전화로 주문을 하게 된다. 그때 사장님이 치킨이 다 되면 연락을 줄테니 찾아 가라고 말한다.

이렇게 상황을 만들어 보면 우리는 치킨이 다 될 때까지 치킨만 목 빠지게 기다릴 필요 없이 업무를 다 마무리하고 전화 오면 그때 가지러 가면 되는 상황이다. 여기서 우리는 비동기식 처리를 하고 있다는 것을 생각할 수가 있다.

바로 비동기식 처리를 한다는 이유가 어떻게 보면 콜백 함수를 쓰는 가장 큰 요인이 아닐까 싶다.

그럼 콜백함수는 무조건 비동기식이냐 라는 의문이 들을수가 있는데 콜백도 동기식과 비동기식으로 나뉠수가 있다.

동기 콜백에 printImmediately함수가 print라는 콜백을 받아서 print(); 콜백을 바로 실행하는 함수가 있다. 'hello'라는 문자를 출력하는 함수를 전달해 주면 hello가 출력되게 되는 것이다. 비동기 콜백도 똑같다 printWithDelay함수가 print와 timeout인자를 받아서 seTimeout메소드에게 전달해 주게 된다. 그럼 'async callback' 과 2000을 넘기게 되면서 2초뒤에 문자가 출력이 되는것이다.

이렇게 되면 결과는 hello가 먼저 나오고 async callback이 그 다음에 나오는데 이유는 hello는 동기식으로 처리가 되어서 바로 출력이 되지만 async callback은 setTimeout이라는 비동기식 API가 사용되기 때문에 aync callback이 먼저 호출됬지만 2초라는 시간뒤에 출력이 되기 때문에 출력결과가 이렇게 나온다고 볼수가 있다.

이렇게 콜백 함수가 어떻게 사용되었는지 알아 보았는데 그럼 여기서 콜백 지옥에 빠진다라는 말이 있는데 이런 상황이 무엇인가를 알아 보도록 하겠습니다.

콜백 지옥이란

☞ 콜백안에 또다시 함수가 호출되어 반복되는 상태.

콜백을 통해서 1,2,3이라는 문자를 호출을 했는데 만약 이런식으로 양이 더늘어나게 된다면 가면갈수록 오른쪽으로 들여쓰기가 깊어지는 현상이 발생이 되고 그렇게 되면 가독성이 너무 떨어지게 되는 상황이 발생되게 된다. 다음에는 이런 현상들을 어떻게 처리해서 콜백 지옥에서 탈출할수 있는지를 파악해 보도록 하겠습니다.

출처 : 링크텍스트

profile
RECORD DEVELOPER

0개의 댓글