이정환 강사님의 인프런 강의 '한 입 크기로 잘라먹는 리액트' 의 강의 내용과 자료를 바탕으로 복습을 위해 정리한 글입니다!
동기
동기란 여러 개의 작업이 있을 때, 차례대로 하나의 작업씩 처리해 나가는 방법을 말한다.
동기
여러 개의 작업을 순서대로, 하나씩 처리하는 방법
console.log('1');
console.log('2');
console.log('3');
/*
실행 결과
1
2
3
*/동기의 장점
- 프로그램의 실행 흐름을 파악하기 쉽다 (위에서 아래로 읽어나가면 됨)
동기의 단점과 보편적 해결방안
- 모든 프로그램의 실행 시간이
0.1초 등으로 짧다면 상관이 없겠지만, 실행 시간이 긴 프로그램이 중간에 껴있게 되면 그 다음 작업들을 수행할 수 없어 전체 프로그램의 성능이 저하된다는 치명적인 단점이 존재한다. - 이를 해결하기 위해 멀티 쓰레드 방식을 사용한다. 이 방식을 사용하면 실행 시간이 긴 프로그램이 중간에 껴있다고 해도 전체 프로그램의 성능 저하를 막을 수 있다.
그런데 자바스크립트 엔진에는 스레드가 1개 밖에 없다... 🥲그래서 이 문제를 해결하기 위해서는 비동기 실행 방식을 선택해야 한다.
비동기
비동기란 동기적이지 않다는 뜻으로, 작업을 순서대로 처리하지 않는 방식이다.
이 때 비동기 작업들은 자바스크립트 엔진이 아닌 브라우저의 Web APIs에서 실행된다.
console.log('1');
setTimeout(()=>{
console.log('2');
}, 3000)
console.log('3');
/* 실행 결과 */
// 1
// 3
// 2비동기 작업 처리하기
콜백 함수
Promise
자바스크립트에서 비동기 처리를 하기 위해 Promise라는 특수한 객체를 사용한다.
Promise란?
비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트 내장 객체로, 비동기 작업들을 랩핑하는 객체이다.
Promise 작업의 효능
- 비동기 작업 실행
- 비동기 작업 상태 관리
- 비동기 작업 결과 저장
- 비동기 작업 병렬 실행
- 비동기 작업 다시 실행
- 기타 등등...
여기서 볼드체의 세 가지 기능만 살펴본다.
비동기 작업 상태 관리
프로미스는 비동기 작업들을 진행 단계에 따라 아래 세 가지의 상태로 나누어서 관리한다.
Promise의 세 가지 상태
- 대기: 아직 작업이 완료되지 않은 상태
- 성공: 비동기 작업이 성공적으로 마무리 된 상태
- 실패: 비동기 작업이 실패한 상태
대기 -> 성공으로 바뀌는 경우를 resolve (해결)이라 하고, 대기 -> 실패로 바뀌는 경우를 reject(거부)라 한다.
const promise = new Promise((resolve, reject)=>{
//비동기 작업을 진행할 코드를 적어주면 된다.
});프로미스 객체는 위와 같이 생성자를 사용해 만들며, 생성자의 인수로는 비동기 작업을 실제로 진행할 callback함수를 전달하면 된다.
인수로 전달되는 콜백함수는, 비동기 작업을 실제로 실행하는 함수라는 의미에서 executor라고 부른다. 이 콜백함수의 매개변수는 resolve와 reject로 resolve에는 비동기 작업을 성공으로 바꾸는 함수가 들어가고,reject라는 매개 변수에는 프로미스가 관리하는 비동기 작업을 실패 상태로 바꾸는 함수가 들어간다.
then 메서드
- 그 후에 라는 의미를 갖으며 execute함수에서 resolve를 호출하게 되면 then메서드에 전달한 콜백 함수를 실행하게 된다.
- 비동기 함수가 성공했을 때에만 then이 실행된다!
- then 메서드의 호출 결과는 프로미스를 반환한다.
catch 메서드
- 실패 버전의
then같은 메서드 - 똑같이 인수로 콜백 함수를 전달한다.
너무 어려워어어어엉
async/await
async: 함수 앞에 붙이는 키워드로, 어떤 함수를 비동기 함수로 만들어주는 키워드이다.- 즉, 함수가 프로미스를 반환한도록 변환해주는 키워드이다.
await: async 함수 내부에서만 사용이 가능한 키워드이다.비동기 함수가 다 처리되기를 기다리는 역할을 한다.