동기 & 비동기_React

miin·2021년 12월 8일
0

React

목록 보기
28/52
post-thumbnail

동기와 비동기의 차이점

동기(Synchronous)

  • 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있다
  • 설계가 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야함

비동기(Asynchronous)

  • 요청을 보낸 후 응답관계 없이 다음 동작을 실행할 수 있다
  • 설계가 복잡하고, 결과가 나오기 전에 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.

비동기처리가 필요한 이유

  • 화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에대한 응답을 줄지 모르는데 마냥 기다릴순 없기 때문

비동기적으로 처리해야할 작업들

  • 파일 읽기
    주로 서버쪽에서 데이터를 받아와야 할 때는, 요청을 하고 서버에서 응답을 할 때까지 대기를 해야하기 때문
  • Ajax 통신작업 (ajax web API 요청)
    서버쪽에서 데이터를 받아와야 할 때는, 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 되기 때문
  • 암호화/복호화
    바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문
  • DOM의 이벤트 처리작업(작업예약)
    단순히 어떤 작업을 몇초 후에 스케쥴링 해야하는 상황에는 setTimeout을 사용
  • 일정 시간 뒤에 동작해야 하는 작업
  • 데이터를 수신하는 코드와 페이지를 표시하는것

비동기 함수를 동기 함수로 만드는 방법

  • 콜백함수로 비동기 처리방식 문제 해결
  • Promise 객체를 사용하여 문제 해결

0개의 댓글