[JS][REACT] 리액트 정리 3

비동기 통신의 등장

- 초기에는 서버에서 모든 데이터를 로드하여 빌드해서 비동기 처리가 필요하지 않음

- Ajax 기술의 등장으로 페이지 로드 없이 클라이언트사이드에서 서버로 요청을 보내서 데이터 처리 가능

- 서버 요청을 기다려야 한다면 , 브라우저가 멈춰있는 상태로 보여짐.

- 비동기 요청 후 다른 작업을 처리 후 응답을 받으면 응답을 처리하는 콜백함수 저장 후 실행

 

Promise

- 비동기 처리 후 실행될 코드를 콜백함수로 보내는 것 -> 콜백 지옥!

- Promise를 활용해서 순서 조작, 에러 핸들링 , 여러 비동기 요청 처리

- pending , fulfilled, rejected의 3개의 상태를 가짐

- 각각 비동기 실행이 끝나기를 기다리는 상태 , 성공한 상태 , 실패한 상태 

- Promise.all() 은 모든 프로미스가 fulfilled되기를 기다림 , 하나라도 에러 발생시 모든 요청 중단

 

async / await

- promise 체인을 구축하지 않고 promise를 직관적으로 사용할 수 있는 문법

- try,,,catch문으로 에러를 직관적으로 처리

- async 함수를 만들고 promise를 기다려야 하는 표현 앞에 await을 붙임

- 여러개의 await을 순서대로 나열해서 then chain을 구현