콜백함수

자바스크립트를 공부하던 초창기부터 계속 들어왔던 콜백함수를 드디어 직접 사용할 일이 생겼다.

이번에도 fetch 작업을 하다가 생긴 문제였는데, 기존 코드에서는 fetch 후의 작업이 모두 무언가를 클릭하거나 상호작용이 있어야지만 일어나는 이벤트들이라 전부 이벤트 위임으로 코드를 짜놨었는데

 

추가적으로 부여할 기능은 특정 상황에서만 새로 fetch 후에 자동으로 이벤트가 실행돼야했다.

이 상황에 나는 콜백함수를 사용하게 됐다.

 

const fetchDetails = async (callback) => {
    // fetch기능 어쩌구저쩌구

    if (typeof callback === 'function') {
      callback(); // 파라미터로 가져온 callback
    }
 };
 
const callBack = () => {
    const triggerEl = document.querySelector('#myTab [data-bs-target="#somethingPane"]');
    bootstrap.Tab.getOrCreateInstance(triggerEl).show();
};

sampleListInfo.addEventListener('createdEvent', () => {
	fetchDetails(callBack);
});

 

맨날 콜백함수콜백함수 할땐 안 와닿았는데 역시 직접 해봐야 좀 이해가 가는것같다.. 콜백지옥도 직접 겪어봐야하는걸가