-
[React] promise, async awaitFrontend/React 2022. 9. 6. 13:29
promise
1. Promise는 무엇인가?
JavaScript(React)에서 Promise는 비동기 처리에 활용되는 객체이다. 여기서 비동기 처리란 line by line 순차적으로 특정 코드의 실행을 끝까지 기다리지 않고 다음 코드를 선제적으로 처리하는 것을 의미한다.
2. Promise의 역할
Promise는 주로 웹 서비스 구현 시 원활한 데이터 통신을 위해 활용된다. 더욱 구체적으로 말씀드리자면, 서버에 데이터를 요청했을 때, 데이터가 모두 받아오기 전에 웹에 출력하려고 할 때 발생하는 오류를 방지하기 위해 활용된다. 즉, Promise 객체는 A, B, C 로직이 있을 때, A 로직이 모두 완료될 때까지 B, C 로직을 대기시키지 않고 실행시키는 데 주로 활용된다.
3. Promise의 상태(State)
Promise 객체가 생성되고 종료될 때까지는 아래와 같이 3가지 상태(state)를 갖는다. 여기서 상태란 Promise의 처리 과정(process)을 의미한다.
상태(State) 설명 Pending(대기) 비동기 로직 처리의 미완료 상태 Fulfilled(이행) 비동기 로직 처리가 완료된 상태로 Promise 결괏값 반환 상태 Rejected(실패) 비동기 로직 처리의 실패 또는 오류 상태 fetch()
fetch()메소드는 promise 타입을 리턴해준다.
// fetch로 전달된 데이터가 성공적으로 전달됐을 땐 then으로 전달된 함수가 실행되기로 약속되어 있다. // catch는 데이터 전달이 실패했을때 실행된다. fetch('https://jsonplaceholder.typicode.com/posts') .then((result) => { console.log('result', result); }) .catch((reason) => { console.log('reason', reason); });
fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => { response.json().then((data) => { console.log('data', data) }) }) .catch((reason) => { console.log('reason', reason); })
fetch와 then, catch 자체가 전부 pomise라고 볼수있기때문에 따로 변수지정이 필요하지 않고 그대로 이어서 쓰는 promise chaining이 가능하다.
Response에 json 메서드를 입혔는데도 Promise가 나오는 것은, 아직 데이터를 다 받지 않은 상태여서 그렇습니다.(header만 도착하고 body가 오지 않음) 그래서 다시 체이닝을 통해 작업하는 것이죠. (데이터가 다 도착한 이후에) 그것이 싫다면 전체에 await을 걸어서 기다린 이후에 json을 입히면 됩니다.
fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => { return response.json(); }) .catch((reason) => { console.log('reason', reason); }) .then((data) => { console.log('data',data); });
이런식으로 json() 값을 return받아주고 따로 promise chaining으로 then을 달아줘도 된다.
async, await
1. Async & Await란?
React에서 비동기 처리를 할때 Promise를 사용하지만 Promise의 단점을 보완하기 위해 ES7에서 async와 await라는 키워드가 추가 되었습니다.
위 키워드를 사용하면 비동기 코드를 마치 동기 코드 처럼 보이게 작성할 수가 있게 되었습니다.
참고 블로그
https://heytech.tistory.com/245
https://velog.io/@limes/React-Async-await
'Frontend > React' 카테고리의 다른 글
[50문 50답] 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? (0) 2022.10.14 [React] 3주차 중간발표 프론트 부분 정리 해둔 것 (0) 2022.09.14 [React] UI/UX란? (0) 2022.09.09 [React] 부모 자식 컴포넌트의 흐름 (0) 2022.07.25