[27] callback function

1. callback function이란?
   파라미터로 함수를 전달하는 함수 즉 함수 내부의 함수 따로 문법이 있는 것이 아님

2. callback function 특징

가.변수나 데이터안에 담길 수 있고
나.매개변수로 전달 할 수 있고
다. 반환 값으로 사용할 수 있고
라. 실행도중에 생성될 수 있다

3. 지금까지 봐왔던 콜백?

가. 콜백함수는 함수 내부의 파라미터로 함수가 들어가는 형태
즉 aaa(function(){})인데
이는 aaa(()=>{})로 바꿀 수 있다.
나. aaa(()=>{})는 map함수와 비슷함
즉 지금까지 아무것도 모르고 써왔던 map, setTimeout등의 함수가 콜백함수 였던 것

4. 콜백지옥?
   계속해서 콜백함수를 써내려가는 것이 마치 지옥에 갖힌 것과 같다고 해서 붙혀진 이름

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

과 같이 예시를 들 수 있다.

5. 해결방법
   가. promise활용

const onClickPromise = () =>{
        console.log('여기는 1번')
        axios
            .get("http://numbersapi.com/random?min=1&max=200")
            .then((res) => {
                console.log('여기는 2번')
                const num = res.data.split(" ")[0]; // 71(랜덤숫자)
                return axios.get(`http://koreanjson.com/posts/${num}`);
            })
            .then((res) => {
                console.log('여기는 3번')
                const userId = res.data.UserId;
                return axios.get(`http://koreanjson.com/posts?userId=${userId}`)
            })
            .then((res) => {
                console.log('여기는 4번')
                console.log(res);
            });
            console.log('여기는 5번')
                // 프로미스 체이닝
            }

그러나 then, then이 계속 나오게 되서 프로미스 체이닝이 발생하게 됨
나. async await함수

 const onClickAsyncawait = async () => {
    const aaa = await axios.get("http://numbersapi.com/random?min=1&max=200");
    const num = aaa.data.split(" ")[0];
    const bbb = await axios.get(`http://koreanjson.com/posts/${num}`);
    const userId = bbb.data.UserId;
    const ccc = await axios.get(`http://koreanjson.com/posts?userId=${userId}`);
    setAsyncAwait(ccc.data);
  };

이런식으로 await를 이용해서 값을 기다린 후 에 값이 나오게 되면 아래로 내려가는 형태를 만들 수 있다.
이렇게 되면 가독성이 좋아지고 순서가 위에서 부터 보장이 됨
await는 반드시 promise가 나오는 곳에서만 써야함.