[React] Async & Await란?

 

1. Async & Await란?

React에서 비동기 처리를 할때 Promise를 사용하지만 Promise의 단점을 보완하기 위해 ES7에서 async와 await라는 키워드가 추가 되었습니다.

위 키워드를 사용하면 비동기 코드를 마치 동기 코드 처럼 보이게 작성할 수가 있게 되었습니다.

 

 

 

2. Async 함수

async function() { return "id" }

const users = async() => { return "id" }

// 결과는 같습니다.

비동기 함수를 만들기 위해서는 단순하게 함수 앞에 async를 붙여서 일반 함수를 async 함수로 만들면 됩니다.

사실 위 함수를 실행시키게 되면 단순히 일반 함수처럼 값을 반환하는 것이 아니라 async()가 Fulfiled Promise를 반환하게 됩니다.

user().then(("id") => console.log("id"))

위 async함수는 위의 Promise함수와 같다고 볼 수 있습니다.

 

 

 

3. Async & Await를 사용한 api 호출

import axios from "axios";

export default function Nav() {

// 통신 받아 올 nav data
const [nav, setNav] = useState();

useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await axios.get(`public/Data/NavData.json`);
        setNavli(result.data.data.nav_data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, []);
  
}

axios를 통해 비동기적으로 api를 호출할 수가 있습니다.

 

 

 

 

4. Async와 Promise의 차이

 

Promise 사용

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

 

Async 사용

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

 

처음에 언급했던 Promise의 단점이란, Promise의 결과로 then()을 사용해 또다른 Promise를 호출하게 되면 Promise Chain이 생기게 되고 이는 길고 복잡한 문장으로 이루어지게 됩니다.

Async를 사용할 경우 좀더 직관적으로 코드를 이해할 수가 있게 됩니다.