Js의 비동기 처리
Javascript는 브라우저를 위한 언어로써 개발되어 싱글스레드를 기반하므로 비동기처리를 독특한 방식으로 수행한다. 자세한 내용은 
Js의 비동기 를 참고하도록 하자. 이러한 처리를 손쉽게 하기위해 프로미스가 ES6 기준 표준으로 자리잡았다
Js의 비동기 를 참고하도록 하자. 이러한 처리를 손쉽게 하기위해 프로미스가 ES6 기준 표준으로 자리잡았다프로미스(Promise)
프로미스는 어떠한 작업의 성공, 실패를 담고있다. 이게 무슨소리냐면 프로미스는 그 자체로는 아무것도 하지 않는다는 의미이다. 이러한 상태를 대기(pending)라고 한다.
프로미스는 오직 then()에 의해서 태스크큐에 등록되고 동작을 수행한다. 이 상태를 이행(fullfilled)상태라 한다. 프로미스에 등록된 동작의 종료가 되는 시점에서 해당 결과를 통한 조작을 then()에 등록된 콜백을 통해 실행한다. 즉 메인 스레드의 동작과 관계없이 비동기적으로 수행이 된다.
또한 해당 프로미스가 실패한 동작을 정의할 수 있는데 이를 거부(rejected)상태라 하며 catch()를 통해 등록된 작업을 수행할 수 있다.
프로미스의 사용
let data = ''
setTimeout(() => { data = 'promise' }, 1000)
console.log(data)
JavaScript
복사
위 코드에서 아무것도 출력이 되지 않을 것이라는 것을 js를 좀 다뤄본사람이라면 알 수 있다. 원하는 동작이 data 변수가 변경된 이후의 출력이라고 할 때 프로미스의 활용이 필요해진다. 아래 코드를 보자
let data = ''
new Promise((resolve, reject) => {
setTimout(() => {
data = 'promise'
resolve(data)
}, 1000)
}).then(res => console.log(res))
JavaScript
복사
해당 코드는 정상적으로 변화한 코드를 출력한다. 프로미스에 등록된 함수를 보면 resolve와 reject를 받는다. resolve의 호출은 프로미스를 이행(fullfilled)으로 전환하여 then()으로 작업을 넘긴다. reject는 프로미스를 거부(rejected)상태로 넘기며 catch()로 작업을 넘긴다.
위 코드에선 resolve를 1초 후에 실행시키므로 프로미스가 이행상태로 변하는 것이 1초 후이고 그 때 then()에 등록된 작업을 실행한다.
Async / Await
프로미스는 일반적인 동기 스타일과 작성이 다르기 때문에 직관적으로 알아보기 힘들며 비동기 작업의 연속이 진행되면 then()을 무한정으로 등록해야 하므로 코드의 가독성이 좋지 않다. 그에대해 Async / Await 문법이 탄생하였다. 위 코드를 async / await화 하면 아래와 같다.
let data
const asyncfunc = async () => {
const promise = new Promise((resolve, reject) => {
setTimout(() => {
data = 'promise'
resolve(data)
}, 1000)
})
data = await promise()
console.log(data)
}
asyncfunction()
JavaScript
복사
then()없이도 프로미스의 결과를 받을 수 있으며 훨씬 직관적이다. 다만 규칙이 있는데 await는 반드시 async함수 내에서만 활용가능하다는 점이다. 이러한 규정은 일반적인 상황에선 크게 문제가 되지 않지만 react내에서 이미 규정된 hook, 대표적으로 useEffect에서 활용할 때 다양한 문제를 야기한다. 따라서 명확하게 동작을 이해하고 활용하는 것이 중요하다
