콜백 함수 📞 : 여기에서 도움을 받으세요

초보 개발자로서 이해해야 할 가장 혼란스러운 기능 중 하나는 콜백 기능이었습니다.

심각하게 혼란 스럽습니다. 그래서 그것들을 일반 영어로 분해해 봅시다.

정의

G.O.A.T.MDN에 따르면 콜백 함수는 다음과 같습니다.

"A function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action."

뭐?

예를 들어 보겠습니다.

실제 사례

실험실이 복잡해지면서 저도 모르게 콜백 함수를 호출하고 있었습니다. 솔직히 저에게는 이것이 그것들을 배우는 가장 좋은 방법입니다. 실험실을 살펴보고 여기에서 무슨 일이 일어나고 있는지 봅시다.

첫째, 내 모든 함수는 내 JSON 데이터를 사용하여 내 .then에서 약속으로 호출됩니다.

첫 번째 함수인 firstMovie는 내 웹사이트에 객체로 넣어야 하는 영화의 데이터 배열(movieData)을 호출합니다. 이러한 모든 변수가 정의되고 이벤트 리스너가 별도의 버튼에 대해 호출됩니다(걱정할 필요 없음).

두 번째 함수인 createImage는 각 영화와 관련된 이미지를 표시한 다음 내비게이션 바로 표시하도록 movieData에 지시합니다.

하지만 이봐, firstMovie가 또 나왔어! 그게 어때서?

createImage는 firstMovie의 도움 없이 자체적으로 너무 흥미로운 작업을 수행하지 않습니다. 단지 이미지를 표시할 뿐입니다. 이전 기능인 firstMovie의 기능을 사용하여 더 많은 작업을 수행할 수 있습니다!

createImage 내부에서 firstMovie를 호출함으로써 우리는 createImage를 통해 생성한 이 새 이미지에 모든 영화의 세부 정보를 표시하는 데 firstMovie의 기능을 활용하도록 알리는 이벤트 리스너를 생성할 수 있습니다. 클릭 한 번으로 firstMovie가 하는 일을 정확히 활성화합니다. 영화에 대한 모든 JSON 데이터를 반복하고 관련 탐색 이미지와 함께 표시합니다!

fetch("http://localhost:3000/movies") 
.then(res => res.json()) 
.then(movieData => {
    firstMovie(movieData[0]);
    createImage(movieData);
})

function firstMovie(movieData) {
    title.textContent = movieData.title
    description.textContent = movieData.description
    year.textContent = movieData.release_year
    pic.src = movieData.image
    watchedBtn.addEventListener('click', (e) => {
        movieData.watched = !movieData.watched;
        watchedBtn.textContent = movieData.watched ? "Watched" : "Unwatched";
    });
    }

function createImage(movieData){
    movieData.forEach((movie) => {
        let img = document.createElement("img");
        img.src = movie.image
        insertImage.append(img)
        img.addEventListener('click', (e) => {
            firstMovie(movie)
    });
})
}

당신은 이것을 얻었다.

콜백 함수에 대해 아직도 헷갈리십니까? 가장 유쾌하게 의인화된 기능을 갖춘 의 이 놀라운 YouTube 비디오를 즐기십시오. 콜백 함수를 즉시 이해하고 빵을 먹고 싶어질 것입니다.



*이미지 출처: Made by ME!
*