밸! 하~

밸로그여러분 안녕하세요

오늘은
callback함수에 대해서 알아보겠습니다!

1.callback함수란?

쉽게말해서 함수를 호출하는 함수라고 할수 있겠습니다
간단히 코드를 통해서 보여드리자면

aaa(function(){})

아래 aaa함수와 같이요
즉 함수가 어떤 함수의 인자로 들어가고 그 함수를 실행하는 함수를 바로 callback함수라고 합니다!
js를 공부하신 분들이라면 잘 아실
setTimeout이라는 함수가 있습니다
이 함수 어떻게 사용했는지 기억나시나요??

네! 이렇게 사용하죠?

setTimeout(()=>{},3000)

이렇게요
이것또한 callback 함수라고도 할수있겠죠?

그럼 왜 이런함수를 사용할까요??

함수를 실행하여 그 함수의 값을 바로 실행하기위해서 사용합니다!

이러한 방식을 과거 API에서 많이 사용했습니다!

API를 요청하는 함수안에 요청이 끝나면 실행시킬 함수를 넣어놨었습니다!

그런데 과거에 많이 사용했던 방식이라고 이야기를 드렸죠?
왜 과거에만 사용할까요??

문제가있기 때문이겠죠??

어떤 문제가 있을까요??
바로 콜백지옥에 빠지게 됩니다
즉
콜백안에 콜백을 부르고 또 콜백안에 콜백을 부르는등 무수히 많은 콜백을 부르게 되면 콜백지옥이라는것에 빠지게 되고 유지보수도 어렵겠죠??

그럼 요즘엔 어떤것을 주로 사용할까요??
callback함수 다음으로 발전된 것이 나왔습니다
바로
promise라는것 인데요

그럼 promise는 뭐엇이고 callback함수와 promise의 차이가 무엇인지 알아보겠습니다

먼저

2.promise란?

기존의 콜백지옥에서 콜백의 수를 줄이기위해
사용 되는것으로

똑같이 api를에서 사용되는 함수입니다 그럼 이 promise는 어떻게 사용하는 것일까요??

이해를 돕기위해 코드를 통해 볼수있도록 하곘습니다

  new Promise((resolve, reject) => {
                //여기서 api요청을 한다면?
                try {
                    const result = " 철수"; // 성공
                    resolve(result);
                } catch (error) {
                    reject("실패 했습니다!!"); // 실패
                }
            })
                .then((res) => {
                    console.log(res); // 철수
                })
                .catch((err) => {
                    console.log(err); // 실패했습니다
                });

자 이렇게 resolve에 들어온게 then으로 reject에 왔을때는 catch로 가게 됩니다
이와같은 방식으로 Promise라는것을 설정하고 그다음에 사용을 할수 있게 됩니다
그런데
저희는 이 promise라는것을 직접 만들어 쓰는것이 아닌 이것들이 만들어진것을 사용을 합니다
바로
axios라는 것인데요
한번 어떻게 사용되는지 봐볼까요?

const result = axios.get("주소")

이렇게 사용했을떄
이 안을 보게되면 Promise값을 받아온다는것을 알 수 있게됩니다

아까 promise에는 then과 catch를 쓸수있다는거 기억나시나요??
그래서 axios에서도 then과 catch를 쓸수있습니다

바로

const result = axios.get("주소").then()

이렇게요!

이렇게 한 이후 두번쨰 요청을 실행할수가 있는데요 어떻게 실행할까요??
한번 봐볼까요??

 const myPromise = () => {
                axios
                    .get(`http://numbersapi.com/random?min=1&max=200`)
                    .then((res) => {
                        axios
                            .get(`https://koreanjson.com/posts/${num}`)
                            .then((res) => {
                                axios
                                    .get(
                                        `https://koreanjson.com/posts?userId=${userId}`
                                    )
                                    .then((res) => {
                                        //최종결과
                                    });
                            });
                    });
            };

어??
callback과 차이가 없어보이는데 도대체 callback과의 차이는 무엇일까요??

3.callback과 promise차이

한번 코드를 통해서 봐볼까요??

promise를 어떻게 줄일수있는지?

            const myPromise = () => {
                axios
                    .get(`http://numbersapi.com/random?min=1&max=200`)
                    .then((res) => {
                        return axios.get(`https://koreanjson.com/posts/${num}`);
                    })
                    .then((res) => {
                        return axios.get(
                            `https://koreanjson.com/posts?userId=${userId}`
                        );
                    })
                    .then((res) => {
                        console.log("4번째로 실행됩니다");
                    });
            };

이렇게 고칠수가있습니다!

이것을 promiseChain이라고 하는데요
마치 promise가 chain처럼 걸리는것을 이야기 합니다 !

그런데 문제가있어요!
바로 실행순서를 예측하기가 어렵다는겁니다!

그럼 더 나은방법이있을까요??

네!
가장 최근에 나오고 가장 많이 사용하는

4.async await

가 있습니다!

어떻게 사용하는지 코드로 봐볼까요??

  const myAsyncAwait = async () => {
                await axios.get(`http://numbersapi.com/random?min=1&max=200`);
                await axios.get(`http://numbersapi.com/random?min=1&max=200`);
                await axios.get(`http://numbersapi.com/random?min=1&max=200`);
            };

이렇게 훨씬 간단하고 실행순서도 알수있게 사용할수 있다는거죠!

다만 이 async await의 경우에는 promise를 불러올때만 사용할수있다는것을 알고 가셨으면 좋겠습니다~

자 오늘은 callback과 promise에 대해서 배웠습니다
두개의 차이 그리고 최근에 사용되는 방법인 async await
왜 사용되는지 어떤 장점이 있는지도 알아보았는데요

오늘도 지식 한개 저축해가셨으면 좋겠습니다

그럼 밸!바~