JavaScript - async와 await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 가독성을 높여준다.

function logName() {
  var user = fetch('url');
  if (user.id === 1) {
    console.log(user.name);
  }
}

이런 함수가 있다고 해보자. 비동기처리방식에서 실행순서를 보장받기 위해서는 콜백함수를 사용해야 한다.

function logName() {
  var user = fetch('url', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

이런식으로 말이다.

하지만 처음 코드에 async와 await을 붙여주는 것만으로도 실행순서를 보장받을 수 있다.

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

기본구문은 아래와 같다.

async function 함수명() { // async() => {} 가 될 수도 있겠다.
  await 메소드명();
}

아래는 리엑트 공부를 하다가 접하게 된, async와 await를 사용한 코드.

useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    ).then((response) => response.json()
    ).then((json) => {
      setMovies(json.data.movies);
      setLoading(false);
    });
  }, []);

위의 코드를 async와 await를 사용해서 만든 게 아래의 코드다.

const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9.0&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  
  useEffect(() => {
    getMovies();
  }, []);

공부는 노마드코더의 니콜라스, 참고와 도움은 캡틴판교님 홈페이지에서 받았다.
두 분 다 자세한 설명과 이해하기 쉽게 알려주신다.