-
동기와비동기_2 (Promise)개발공부/React 2023. 10. 18. 12:07
https://hani-develop-history.tistory.com/42
위에 글에 이어서 비동기 공부한 내용을 정리하고자 한다.
JS에서 비동기 작업을 도와주는 객체 중 하나인 Promise에 대해 공부해봤다.
Promise
- 비동기 처리를 도와주는 객체
장점
- 비동기 처리 시점을 명확하게 표현할 수 있음
- 연속된 비동기 처리 작업을 추가, 삭제, 수정하기 좋음
비동기 작업 상태 종류
- Pending: 대기
- Fulfilled: 이행
- resolve 함수가 호출된 경우 성공
- reject 함수가 호철된 경우 실패
- Rejected: 실패
예제 코드
function isPositive(number) { const executor = (resolve, reject) => { setTimeout(()=>{ if (typeof number === "number") { resolve(number > 0 ? "양수" : "음수"); } else { reject("숫자가 아닙니다."); } }, 2000); }; // 객체 생성, 선언된 순간 바로 실행됨! const asyncTask = new Promise(executor); return asyncTask; } // 성공 const res = isPositive(101); res.then((res)=>{ console.log("성공", res); // Fulfilled: 이행 }.catch((err)=>{ console.log("실패", err); // Rejected: 실패 }));
위에 예제는 이제 Promise의 기본 구조를 알기 위해 작성한 코드입니다.
그래서 위 코드만 봤을 때는 "어? 어떻게 저 코드로 콜백 지옥을 벗어날 수 있지?" 라는 생각을 할 수 있을 거 같습니다.
왜냐하면 제가 그랬거든용 ㅎㅎㅎ
그래서 다른 예제를 통해 얼마나 콜백 지옥을 벗어날 수 있게 해주는지 확인해보겠습니다!!!
예제2
function taskA(a, b) { return new Promise((resolve, reject) => { setTimeout(()=>{ const res = a + b; }, 2000); }) } function taskB(b) { return new Promise((resolve, reject) => { setTimeout(()=>{ const res = b * 2; }, 1000); }) } function taskC(c) { return new Promise((resolve, reject) => { setTimeout(()=>{ const res = c * -1; }, 3000); }) } // 콜백 해결 이후 taskA.then(5, 1).then((a_res)=>{ console.log("a의 결과: ", a_res); return taskB(a_res); }).then((b_res)=>{ // taskA의 return 값 (promise 객체) console.log("b의 결과: ", b_res); return taskC(b_res); }).then((c_res)=>{ console.log("c의 결과: ", c_res); }); // 콜백 해결 이전 taskA(3, 4, (a_res)=>{ console.log("a의 결과: ", a_res); taskB(a_res, (b_res)=>{ console.log("b의 결과: ", b_res); taskC(b_res, (c_res)=>{ console.log("c의 결과: ", c_res); }) }) })
확실히 위에 코드를 보면 이전과 이후에 얼마나 차이가 나는지 보입니다.
지금은 사용하는 함수가 3개 밖에 없지만 프로젝트가 커질 수록 Promise의 장점을 알 수 있을 거 같습니다.
728x90'개발공부 > React' 카테고리의 다른 글
DOM에 직접 접근하기 (useRef) (0) 2023.10.26 리액트 프로젝트 구조 (0) 2023.10.25 리액트에서의 메서드 (map, concat, filter) (0) 2023.10.20 동기와 비동기_1 (0) 2023.10.17 렌더링 최적화_1 (React.memo) (0) 2023.10.16