WebProgramming/React

[React] Promise와 Async&Await

2022. 6. 30. 21:48
목차
  1. Promise
  2. Async & Await

Promise

; 비동기 처리에 활용되는 객체

- 원할한 데이터 통신을 위해 활용 ; 서버에 데이터를 요청했을 때, 데이터를 모두 받아오기전에 웹에 출력하는 오류 방지

구조 ; new Promise((resolve, reject)  => {}) ; 대기 상태인 Promise객체를 생성하며 콜백 함수 선언

then()을 활용해 결과 값을 받을 수 있음

 

호출 성공인 resolve와 then

function getData(){
    return new Promise( (resolve, reject) => {
      let data = 10;
      resolve(data);
    })
  }
  
getData().then((resolvedData) => console.log(resolvedData));

호출 실패인 reject와 catch

function getData() {
  return new Promise((resolve, reject) => {
    reject(new Error("This is rejected!"));
  });
}
getData().catch((err) => console.log(err));

 

Promise의 객체 연결

function increment() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1);
    }, 2000);
  })
    .then((res) => {
      console.log(res);
      return ++res;
    })
    .then((res) => {
      console.log(res);
      return ++res;
    });
}
increment();
더보기
function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 3000);
  });
}
function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}
function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

taskA(5, 1) // taskA에 5,1를 인수로 집어 넣음
  .then((a_res) => {
    // 리턴값 a_res를 resolve함수의 인수인 res에 집어 넣음
    console.log("A RESULT :", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    // 위에서 나온 리턴값 taskB(a_res)인 b_res를 resolve함수의 res로 집어넣음
    console.log("B RESULT : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C RESULT :", c_res);
  });

 

 

Async & Await

; 비동기 처리를 할 때 사용하는 Promise의 단점을 보완하기 위해 ES7에서 추가된 키워드

- 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음

함수명 앞에 async를 붙히면 됨

async function() { return "id" }

async와 await를 활용한 함수

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync1() {
  await delay(3000);
  return "hello async";
}
async function main() {
  const res = await helloAsync1();
  console.log(res);
}
main();

- await이 붙은 함수는 동기적으로 처리함 ; 해당 함수가 실행되기 전까지 아래 함수를 실행하지 않음

- await은 async붙은 함수에서만 사용 가능

저작자표시 (새창열림)

'WebProgramming > React' 카테고리의 다른 글

[React] useRef를 이용한 DOM조작  (0) 2022.07.03
[React] React 프로젝트 - DiaryEditor Component  (0) 2022.07.01
[React] Props  (0) 2022.07.01
[React] useState를 이요한 상태 관리  (0) 2022.07.01
[React] 동기적 방식과 비동기적 방식, 콜백 함수  (0) 2022.06.30
[React] React 공부법  (0) 2022.06.28
[React] React 개발환경 구축하기  (0) 2022.06.27
[React] React 사전 지식(React를 쓰는 이유) & 개발환경 체크  (0) 2022.06.27
  1. Promise
  2. Async & Await
'WebProgramming/React' 카테고리의 다른 글
  • [React] Props
  • [React] useState를 이요한 상태 관리
  • [React] 동기적 방식과 비동기적 방식, 콜백 함수
  • [React] React 공부법
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • dfs
  • LV2
  • 카카오 채용연계형 인턴십
  • 해커톤
  • BFS
  • 함수
  • 스터디 후기
  • 개발 is life
  • KAKAO BLIND
  • 누적합
  • Kakao Tech Internship
  • 구름
  • 반복문
  • 개발 일상
  • 개발 회고
  • lv3
  • 카카오
  • 1일 1커밋 후기
  • Retry
  • Union-find
  • 1년 회고
  • 구름톤

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
[React] Promise와 Async&Await
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.