Dev/React Native

ReactNative: 5/2 공부일지 작성 - await

두넌 2023. 5. 2.

await에 관한 설명

React Native은 JavaScript의 비동기 처리 방식인 Promise와 async/await를 지원합니다. await은 Promise 객체가 처리되는 동안 코드 실행을 일시 중지하고, 해당 Promise 객체가 처리될 때까지 기다린 다음 결과 값을 반환합니다. 이를 통해 비동기 처리를 보다 간편하게 처리할 수 있습니다.

await는 항상 async 함수 내부에서 사용되어야 하며, Promise 객체를 반환하는 함수 앞에 위치합니다. 이 때, Promise 객체의 처리 결과를 변수에 저장하거나, 해당 결과를 다른 함수로 전달하거나, 그 결과를 출력하는 등의 작업을 수행할 수 있습니다.

 

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://example.com/users/${userId}`);
    const userData = await response.json();
    console.log(userData);
  } catch (error) {
    console.error(error);
  }
}

 

위 코드는 fetch를 이용해 사용자 정보를 가져오는 함수입니다. async 키워드가 함수 선언 앞에 위치하고 있으며, 함수 내부에서 Promise 객체를 반환하는 fetch 함수가 await 키워드 앞에 위치하고 있습니다. fetch 함수의 처리 결과는 response 객체로 반환되고, response 객체에서 JSON 형태의 사용자 정보를 가져오기 위해 두 번째 await 키워드가 사용됩니다.

 



이렇게 async/await을 사용하면 Promise 객체를 사용하는 것보다 더욱 직관적이고 가독성이 높은 코드를 작성할 수 있습니다. 하지만, 코드 실행 순서와 에러 처리 등에 대한 이해가 필요하므로 충분한 학습과 이해가 필요합니다.

댓글