콜백지옥을 해결코자 나온게 Promise
Promise : 비동기적인 실행을 위한 js내장 객체
state : pending -> fullfilled or rejected
resolve나 reject를 반환.

async, await을 쓰면? -> promise 객체를 반환
promise chaining보다 가독성이 좋아짐
async함수 안에만 await을 쓸수 있다.
비동기적 코드를 동기적인것처럼 바꿀 수 있다.

const promise = new Promise((resolve, rejected) => {
  console.log("doing something...");
  setTimeout(() => {
    resolve("kang");
    // rejected(new Error("no network"));
    // Error : JS object중 하나
  }, 1000);
});

promise
.then((value) => {
  // value에는 resolve가 잘 해결됐을대의 결과값
}
.catch((error)=>{
  // 바로 앞의 것(then)이 일해결을 잘 못하면 시행되는 코드
}
.finally(() => {
  // 앞의것이 성공하든, 실패하든 수행되는 코듣
}

const getHen = () =>
  new Promise((resolve, rejected) => {
    setTimeout(() => resolve("치킨"), 1000);
  });

const getEgg = (hen) =>
  new Promise((resolve, rejected) => {
    // setTimeout(() => resolve(`${hen}=>달걀`), 1000);
    setTimeout(() => rejected(new Error(`error! ${hen} => 달걀`), 1000));
  });

const getMeal = (egg) =>
  new Promise((resolve, rejected) => {
    setTimeout(() => resolve(`${egg}=>후라이`), 1000);
  });

getHen()
  .then(getEgg)
  .catch((error) => {
    return "Bread";
  })
  .then(getMeal) // 단 하나의 파라미터만 들어올경우에는 이렇게 함축할 수 있다.
  //then의 결과값은 promise객체
  .then((t) => console.log(t)); // 이문장도 console.log만 쳐줘도 된다.

그래서 fetch할 때 async await을 항상 쓰는게 좋은가?

값을 DB로부터 불러오는것이기 때문에 써준다.

https://medium.com/@dannysoto/should-i-use-async-await-instead-of-just-fetch-in-javascript-710a72731e29
이 아저씨가 써놓은 글이 도움이 됐다.
async await은 문법적인 설탕, 즉, 보기 쉽고 아름다운 코드를 만들기 위해 생성된 것이다.

✅그니까 써라. then()then()then() 체인을 보고싶지 않다면 말이다.

아래 2 코드는 같은 결과값을 도출한다.
수많은 then.then.then을 피하기 위해 async, await을 이용하라.

function getData() {
  fetch(myApi)
  .then(response => response.json())
  .then(results => {
    console.log(results)
    // return API data
  }
}

async function getData() {
  let response = await fetch(myApi);
  let results = await response.json();
  return results;
}

useEffect에서 async await을쓸때,
useEffect(async () => 처럼 바로 async 붙여주는게 아니다.
따로 useEffect안에 async가붙은 함수를 만들어주고, 호출해주는 부분을 만들어줘야한다.

예시

useEffect(() => {
    const fetchData = async () => {
      const fetched = await axios(
        `https://node-pagnation.herokuapp.com/users${
          location.search || `?limit=${LIMIT}&offset=0`
        }`
      );
      setUsers(fetched.data.users);
    };
    fetchData();
  }, [location.search]);

참고문헌