JS 동기, 비동기 완벽 이해

BellBoy·2023년 4월 27일
0

chat gpt한테 물어봤는데 완벽하게 이해할 수 있게 설명해 주었다

react js 에서 async 함수와 일반 함수의 차이점이 뭐야?

ReactJS에서는 구문이나 사용법 측면에서 비동기 함수와 일반 함수 사이에 차이가 없습니다. 차이점은 반환 값과 동작에 있습니다.
일반 함수는 실행 직후 값을 반환하는 반면 비동기 함수는 결국 값으로 확인되는 약속을 반환합니다. 이를 통해 메인 스레드를 차단하지 않고 API 호출과 같은 비동기 작업을 함수 내에서 수행할 수 있습니다.
ReactJS에서 비동기 함수를 호출할 때 'await' 키워드를 사용하여 다음 코드 줄을 계속 진행하기 전에 약속이 해결될 때까지 기다릴 수 있습니다. 중첩된 콜백을 피하고 더 깨끗하고 읽기 쉬운 코드를 작성할 수 있으므로 비동기 데이터로 작업할 때 유용할 수 있습니다.
async/await를 사용하면 비동기 호출을 처리하는 데 추가 처리 시간이 필요하므로 애플리케이션에 약간의 오버헤드가 추가될 수 있습니다. 따라서 필요한 경우에만 비동기 함수를 사용하고 성능을 위해 코드를 최적화하는 것이 중요합니다.

위 질문을 보고 비동기면 다른 작업이 가능한데 await를 사용하면 response가 올때까지 대기한다고 해서 다시한번 질문해보았다.

위 질문에 이어서 await를 사용하면 response가 올때까지 기다리고 다음 코드를 실행한다는거야? 비동기랑 느낌이 다른거 같아서 설명해줘

예, 비동기 함수에서 'await' 키워드를 사용하면 함수가 다음 코드 줄로 이동하기 전에 약속이 해결될 때까지(값 또는 오류 포함) 대기한다는 의미입니다. 프라미스가 해결될 때까지 함수 실행이 일시적으로 일시 중지되기 때문에 이를 "차단" 동작이라고 합니다.
그러나 async 함수의 전체 동작은 여전히 ​​비동기입니다. 이것은 함수가 "차단"되어 약속이 해결되기를 기다리는 동안 비동기 함수 외부의 다른 코드가 계속 실행될 수 있기 때문입니다. 이렇게 하면 약속이 해결되기를 기다리는 동안 개별 비동기 함수가 차단되더라도 애플리케이션의 더 큰 컨텍스트에서 비차단 동작이 가능합니다.
요약하면 JavaScript의 비동기 함수는 약속 및 'await' 키워드를 사용하여 개별 코드 줄을 차단하는 동시에 애플리케이션의 더 큰 컨텍스트가 비동기적으로 계속 실행되도록 허용함으로써 비차단 동작을 허용합니다.

완벽이해 chat gpt 최고!

profile
리액트러버

0개의 댓글