자바스크립트 - 비동기 함수, 콜백 함수

콜백 (함수) = 어떤 함수의 아규먼트로 전달되는 함수

 

 

setTimeout(callback, delay, arg0, arg1, ...);

 

3번째 아규먼트부터 callback의 아규먼트로 전달이 된다

 

function sayHello(name) {
  console.log(`Hello ${name}!`);
}

console.log('시작');

setTimeout(sayHello, 2000, 'Codeit');

console.log('끝');

 

console.log('시작');

setTimeout((name) => console.log(`Hello ${name}!`), 2000, 'codeit');

console.log('끝');

arrow 함수로 써줄때는 앞에서 파라미터를 뭐로 받을지 (name) 써주고 함수 동작부에서도 불러올 파라미터 이름을 써줘야한닷

 

---

비동기 함수는 뒤에 있는 코드를 모두 실행하고 콜백을 실행한다. 

delay = 지연 시간 = 0이더라도 제일 마지막에 실행됨

 

---

실행할 콜백이 여러개일 경우 동기적으로 실행된다 

console.log('1');

setTimeout(() => console.log('2'), 1001);

setTimeout(() => console.log('3'), 1000);

console.log('4');

// 1, 4, 3, 2

 

---

다른 비동기 함수

 

setInterval(callback, interval) : 시간 간격마다 콜백 반복

 

반복을 멈추고 싶으면 clearInterval() 활용 

console.log('Start');

const intervalID = setInterval(() => console.log('2초가 지났습니다'), 2000);

// 7초 후에 setInterval() 해제
setTimeout(() => clearInterval(intervalID), 7000);

console.log('End');

 

addEventListener()

const btn = document.querySelector('.my-btn');

btn.addEventListener('click', () => console.log('button clicked!'));

// ...

btn.addEventListener() 아래에 있는 코드를 실행하다가

사용자가 btn 요소를 클릭하면 콜백이 실행돼서 'button clicked!'라고 콘솔에 출력

 

리액트 useEffect() 

function PostList() {
  // ...

  useEffect(() => console.log('render finished!'), []);

  return (
    <div className="post-list">
      <div className="post-item">...</div>
      <div className="post-item">...</div>
      <div className="post-item">...</div>
      ...
    </div>
  );
}

 PostList()는 어떤 웹사이트의 포스팅 목록에 해당하는 컴포넌트인데요. 안에 useEffect()라는 비동기 함수가 있습니다. 이 함수는 컴포넌트가 모두 화면에 그려지는 시점에 콜백을 실행해 줍니다.

그러니까 React는 PostList() 함수의 내용을 쭉 실행하고 리턴되는 HTML 요소들을 그리기 시작하는데요 (화면에 그리는 작업은 시간이 조금 걸립니다). 작업이 완료되고 나면 useEffect()에 등록된 콜백이 실행되고 render finished!라는 메시지가 출력되는 거죠.

---

 콜백헬... hell...

: 여러 비동기 작업을 연속적으로 처리하기 위해 콜백함수를 중첩해서 사용

-> 코드를 이해하기 힘들고, 디버깅이나 테스트도 어려움

-> promise 문법 이 나오게 됨