React - 비동기와 동기

비동기와 동기

개념

동기

• 서버에서 작업을 끝내기를 기다린 후, 다음 작업을 실행하는 방식의 통신
• 간단하게 코드 작성이 가능하지만, 여러 작업이 동시에 실행 될 경우 성능 저하라는 단점이 존재함

비동기

• 요청을 보낸 이후, 응답을 기다리지 않고 다음 작업을 실행하는 방식의 통신
  
• 상품 등의 목록을 가져오기, 다운로드 작업 등이 예시로 들 수 있음
  
• 여러 작업을 동시에 처리하거나, 병렬로 처리할 때 적합함
  
• 전체적인 작업의 성능을 향상 시킬 수 있음
  
• 자바스크립트에서는 promise를 많이 사용함
  

비동기의 종류

Ajax

• Asynchronous Javascript And XML의 약자로, 자바스크립트를 이용하여 비동기 방식으로 서버에서 필요한 데이터를 가져와 페이지에서 변경이 필요한 부분 만을 고치는 기법
• 주목적은 화면의 전환 없이 클라이언트 - 서버 간의 정보를 교환하는 것임

장점

• 페이지 갱신 없이 서버 - 클라이언트 간의 비동기 통신을 구현 가능함
  • 속도 면에서 성능 개선이 가능함
• 별도의 플러그인이 필요 없음
• Http 전송 중에도 웹 어플과의 상호작용이 가능함

Axios

• 브라우저, Node.js를 위한 Promise API를 사용하는 HTTP방식의 비동기 통신 라이브러리

특징

• 환경에 따라서, 브라우저의 XMLHttpRequest나 Node.js의 Http API를 사용함
• Promise API를 사용함
• HTTP의 요청/응답을 JSON의 형태로 자동으로 변환함
• 요청을 취소 및 타임아웃의 설정이 가능함
• Fetch에 비해서 더 많은 기능을 가지고 있음

Fetch와의 비교

Fetch

• 내장 라이브러리이므로, import없이도 사용 가능하다
• 지원하지 않는 브라우저가 존재함
• promise를 반환 및 json으로 변환해야 함
• 네트워크 장애 / 요청이 완료되지 않을 경우에만 reject로 response 전달이 가능함
  • 400/500대의 에러는 response.ok를 직접 확인해야 함

Axios

• 데이터를 바로 전달함
• 요청을 중간에 취소 / 타임아웃 설정 등의 기능이 존재함
• 400/500대의 에러가 발생할 경우, reject로 response를 catch로 잡아 낼 수 있음
• 프로젝트의 상위에 임포트 해줘야 함

데이터 전달

• **response **:객체로 전달
• fetch: JSON,stringify()로 직렬화 해서 넘김

정상적 요청 / 응답 체크

• **response **:status가 200인지, statusText를 통해서 확인
• fetch:객체가 ok 프로퍼티를 포함하는지 확인

응답을 얻는 방법

• response: response 객체의 data property에 접근하여 획득
• fetch: response 객체에 json() 메소드를 호출 및 json 객체를 획득함

Promise

• React에서 비동기 처리에 활용되는 객체로, 웹 서비스에서 데이터 통신을 위한 목적으로 사용됨

• Promise는 3개의 상태를 가짐

  1. Pending(대기) - 초기 상태로, 이행 혹은 거부되지 않은 상태임
     • 객체를 생성했을 때의 상태로 resolve(실행)과 reject(실패)를 인자로 가짐
  2. Fulfilled(이행) - 비동기 로직 처리가 완료된 상태로, Promise의 결과값을 반환한 상태
  3. Rejected(실패) - 비동기 로직 처리의 실패 혹은 오류 상태

• ES7부터는 async/await를 이용하여 비동기 코드를 동기 코드처럼 작성 가능함

  • promise를 사용하면, then()을 이용해 다른 Promise를 호출하여 길이가 늘어남

    이는 Async/Await를 이용하여 해결 가능함

사용 방법

Ajax

$.ajax({
    url: "링크",
    type: "",
    async: "" //디폴트값: true
    data: "",
    dataType: "",
    timeOut: ,
    contentType: ""
});

• url: 요청할 URL
• type: 수행할 Method(GET, POST, PUT, DELETE)
• async: 디폴트값은 true로, false로 설정 시 동기 통신으로 수행 됨
• data: 전달할 파라미터
• dataType: 서버에서 반환할 데이터 방식(xml, html, json…)

Axios

요청

기본 구조

axios({
    url: '주소',
    method: '',
    data: { //보낼 데이터 }
})

url

• 보낼 주소

method

• GET, POST, DELETE, PUT등을 사용 가능함

data

• body에 보낼 데이터로, 요청 방식이 PUT, POST, PATCH일 경우에 사용함

응답

• 응답을 받는 경우에는 .then를 이용해 처리가 가능함

프로퍼티

• data:서버가 제공한 응답
• status: 서버의 HTTP 상태 코드
• statusText: 서버 응답으로부터의 HTTP 상태 메시지
• headers: ‘headers’ 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
• config: config는 요청에 대해 ‘axios’에 설정된 구성
• request: 응답을 생성한 요청
  • 브라우저: XMLHttpRequest 인스턴스
  • Node.js: ClientRequest 인스턴스

단축 메소드

• GET, POST, PUT, DELETE 등이 존재한다
• GET: axios.get(url[, config])
• POST: axios.post(url, data[, config])
• PUT: axios.put(url, data[, config])
• DELETE: axios.delete(url[, config])

Promise

Async

• 함수 앞에 async를 붙여서 일반 함수를 async 함수로 만들 수 있음
• 사용 할 경우 일반 함수처럼 값을 반환하지 않고, Fulfilled Promise를 반환함

Await

• promise를 기다리기 위해서 사용되는 연산자로, async 함수 내부에서만 사용 가능

[rv] = await Expression;

• rv : Promise인 경우 만족되는 값이 반환되며, Promise가 아닌 경우에는 그 값 자체가 반환됨
• expression: Promise 혹은 기다릴 값

Fetch

기본 구조

fetch("Address",
{
	method: "", //선택
    headers: {}, //선택
    body: JSON.stringify({});
})
.then()
.then()
.catch()

fetch():

• 보낼 주소, method 방식, 요청 정보 등을 가지고 있음

• API 주소를 받으며, 필수 인수임
• http://주소 or 도메인 주소*with 포트 번호), 엔드 포인트

method

• method는 기본값은 GET으로, POST, PUT, DELETE 등을 사용 가능하며, 생략 가능함

headers

• Content-Type: “application/json”를 주로 사용함

body

• GET 메소드에서는 사용하지 않음

• JSON.stringify를 이용하여 직렬화하여 사용해야 함

• then(): 받을 데이터 형태로 세팅하는 것
  • 응답을 받아서, json() 메소드로 파싱한 json()값을 반환함
• then(): 실제 데이터가 담기는 곳
  • 리턴받은 json값을 받아서, 원하는 대로 처리가 가능함

---

참고한 자료

동기(Synchronous)와 비동기(Asynchronous)의 차이가 뭔가요?

[React] Async & Await란?

AXIOS 설치 & 특징 & 문법 💯 정리

자바스크립트 Promise 개념 & 문법 정복하기

Ajax - 개념 및 사용법(동기,비동기)

[React] axios 와 fetch 차이점

[React] Async & Await란?

자바스크립트 fetch().then() 사용법 알아보기