[React, JavaScript] 비동기 처리

비동기란 

요청이 끝날 때까지 기다리는 것이 아니라 동시에 여러가지 요청을 처리하거나 기다리는 과정에서 다른 함수를 호출 할 수있는것

 

예를들어 ajax로 서버 쪽 데이터를 읽어오는 작업을 수행할 때 비동기적으로 하지 않으면 서버에서 많은 양의 데이터를 읽어오는 동안 다른 작업은 할 수 없게됨.

 

setTimeout(print, 3000);

 

코드가 3초동안 멈추는것이 아니라 3초 뒤에 print가 호출되는것

 

비동기작업을 할 때 흔히 사용되는 방법은 콜백 함수를 사용하는 것임

 

위의 예제에서 print를 3초 뒤에 호출되도록 setTimeout인자로 전달해주는데 이러한 함수를 콜백 함수라고 함

 

 

 

Promise는 콜백 지옥 같은 코드가 형성되지 않도록 사용.

 

async/awit는 Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법

 

함수의 앞부분에 async키워드를 추가하고, 해당 함수 내부에서 await를 사용함. 그러면 Promise가 끝날 때까지 기다렸다가 결과 값을 알아낸다.

 

주의 해야할 점은 컴포넌트가 처음에 렌더링되는 시점에서 api를 요청할 때 useEffect를 사용하는데 이땐 async를 붙이면 안된다.

 

만약 useEffect내부에서 async/await를 사용하고 싶으면 함수 내부에 async키워드가 붙은 또 다른 함수를 만들어서 사용해주어야함