비동기 처리)
비동기 처리는 이전 포스팅에서 비동기로 처리되는 것을 동기로 바꿔주는 것이라고 포스팅하였습니다.
오늘은 비동기 처리 3가지 방법에 대해서 알아봅니다.
비동기처리는 3가지 방법이 있습니다.
1)콜백함수
2)프로미스
3)async, awiat
기존 콜백함수가 자주 쓰였는데 ES6문법에서 프로미스와 async,awiat가 등장하게 되었다는 것으로 알고 있습니다. async,awiat가 코드도 깔끔하고 쓰기 좋은 형태로 개선되었습니다.
첫번째로 콜백함수에 대해서 알아봅니다.
콜백함수)
콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다
콜백은 마치 예약하는 것과 같아서 데이터가 올때 이 다음을 실행할거야 라고 말하는 것과 같습니다.
자주 사용한 fetch함수를 예제로 봅니다.
fetch(url, [options]).then(response => response.json()).then(data=>console.log(data))
이런식으로 fetch함수에서 .then .then을 공식처럼 외우고 사용하는 경우가 있습니다. 위의 예시와 같이 .then함수가 콜백함수 역할을 하게 됩니다.
fetch로 데이터를 요청하고 만일 데이터가 성공적으로 들어왔을때
then을 실행해줘 와 같습니다.
fetch가 프로미스객체를 반환하기 때문에 .then()을 쓸수 있습니다.
위의 예시와 반대로 비동기함수일 경우 매개변수로 콜백함수를 사용할수 있는데 이는 자바스크립트가 일급객체이기 때문에 콜백함수를 사용할수 있습니다.
위의 예시는 setState를 사용할때 두번째 매개변수로 콜백함수를 자주 사용하였을 것입니다.
setState(!state, console.log(state));
이런식으로 말이죠.
비동기 처리를 위해 콜백함수의 사용 좋은 방법인데 왜 다른 방법들이 등장했을까요 ?
콜백지옥때문에 등장하게 되었습니다.
처리 이후 다양한 함수들을 처리하게 될때 계속적으로 콜백함수 예로 .then()을 계속 사용하다보면 코드가 지저분해지고 복잡해지는 경우가발생됩니다.
이를 콜백지옥이라고 합니다.
이를 해결하기 위해서 promise와 async, awiat가 등장하게 된 것입니다.
그렇다면 promise 어떻게 사용할까요 ?
Promise
프로미스객체는 new promise 로 생성합니다.
new promise(function (resolve, reject){}) 이런식으로 쓰입니다. 최근 화살표 함수의 등장으로 더 간략하게 사용하게 됩니다.
new promise((resolve,reject)=>{}) 이렇게 말이죠
프로미스를 사용할때 알아야 하는 기본개념이 state(상태) 입니다.
프로미스는 3가지 상태를 가집니다.
프로미스 3가지 상태
Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
대기, 이행 , 실패로 나와 있는데 대기,성공,실패로 이해하는 것도 괜찮습니다.
대기 : new promise()함수를 호출한 상태입니다.
콜백함수로 부른 resolve를 실행하면 이행 상태가 됩니다.
이행 : new promise((resolve,reject)=>{resolve()}
이와 반대로 실패는 reject를 호출하면 됩니다.
실패 : new promise((resolve,reject)=>{reject()}
프로듀서 와 컨슈머
프로듀서
그리고 프로미스에서는 프로듀서와 컨슈머로 나뉘기도 합니다.
프로듀서는 위의 처리를 하는 조건문을 작성하는 것을 말합니다.
resolve, reject함수를 조건문을 작성하여 처리하는 것입니다.
new promise((resolve,reject)=>{resolve(console.log('성공'))}
이 조건일때 성공시 성공이 찍힙니다.
new promise((resolve,reject)=>{reject(console.log('실패'))}
이 조건일때 실패시 실패가 찍힙니다.
프로듀서는 비유로 설명하자면 성공할때는 데이터를 전달해주자, 실패일때는 에러코드를 나타내주자 라고 처리를 하는 것입니다.
컨슈머
컨슈머는 값을 받는 것을 말합니다.
컨슈머는 고객들에게 성공할때 데이터를 주자, 실패일때는 에러 안내 메시지를 알려주자로 직접 데이터를 사용하는 것입니다.
resolve,reject 각각 사용하는 함수가 다릅니다.
성공 했을 경우 (resolve) .then()을 이용하여 처리 결과 값을 받을 수 있습니다.
new promise((resolve,reject)=>{return let data = 1000 resolve(data))}.then(console.log(data))
실패 했을 경우 (reject) .catch()를 이용하여 처리 값을 받을 수 있습니다.
new promise((resolve,reject)=>{reject('error'))}.catch((err)=>{console.log(err)})
.then함수도 프로미스를 반환하기 때문에 .then().then()을 사용하여 계속 처리를 이어 나갈수 있습니다.
오늘은 콜백함수와 promise에 대해서 배워보았습니다.
어려운 내용이기에 직접 사용해보고 많은 예시들을 찾아보면서 익혀야 할것 같습니다. 생각보다 글이 길어져 async awiat는 다음 포스팅에서 이어가도록 하겠습니다
