비동기 프로그래밍

🔹 동기 vs 비동기

• 동기적 방식 : 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식

• 비동기적 방식 : 어떤 작업을 요청했을 때 그 작업이 종료될 때 까지 기다리지 않고 다른 작업을 하고 있다가 요청했던 작업이 종료되면 그에 대한 특정 작업을 수행하는 방식이다.

🔹 Promise

자바스크립트 비동기 처리에 사용되는 객체이며 Promise 는 주로 서버에서 받은 데이터를 화면에 표시할 때 사용한다.

Promise 의 상태

상태	설명
Pending (대기)	비동기 로직 처리의 미완료 상태
Fulfilled (이행)	비동기 로직 처리가 완료된 상태로 Promise 결괏값 반환 상태
Rejected (실패)	비동기 로직 처리의 실패 또는 오류 상태

let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout( function() {
    resolve("성공!")  // 와! 문제 없음!
  }, 250)
})

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage)
});

🔹 async / await

async 와 await을 사용하면 Promise를 좀 더 편하게 사용할 수 있다.

async : async 는 function 앞에 위치하며 해당 함수는 항상 Fulfilled Promise를 반환한다.(함수 내부는 전부 비동기로 바뀐다.)

await : async 내부에서만 사용이 가능하고, Promise가 처리될 때 까지 기다린다.( await을 만나면 코드는 다음라인으로 넘어가지 않는다.)
웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있다.
❗️ await은 async 안에서만 사용 가능하다!!

🔹 컴포넌트에서 API 호출하기 (fetch API , axios)

Fetch API

(https://jsonplaceholder.typicode.com/)

Response.json() 비동기로 이뤄지고 Promise를 return 한다. (then or await 필수)

Axios

npm install axios => vscode 설치 명령어

node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. (Fetch에서 안되는 timeout이 Axios에선 됨)

요청 Config(https://axios-http.com/kr/docs/req_config)
useEffect 의 함수는 promise를 반환하면 안된다.

🔹 async / await / axios 로 API 호출하기

json 형식으로 되어있는 users의 데이터를 받아오는걸 해 보자
jsonplaceholder

우선 받아올 데이터 상태 관리를 위해 useState 를 사용하고
컴포넌트가 마운트 됐을 때 데이터가 필요하므로 useEffect도 사용해주자

axios를 사용하기 위해서는 import 해야되니 잊지말자

console 을 확인해보면 데이터가 잘 들어오고 있다.
우리가 필요한 것은 data 이므로 user.data로 state를 설정해 주자.

map을 활용하여 원하는 값 들만 추출해서 화면에 보여주면된다.

오류처리는 axios 공식문서 를 참고하자