동기2 통신과 rest-API 그리고 graphql-API, TIL(복습 4일차) Async와 Await 동기와 비동기방식 통신에 있어서 프론트엔드가 요청을 하면 백엔드가 응답을 해준다. 그런데 통신 방식에 있어서 동기방식은 하나의 요청에 하나의 응답 그 다음 요청에 그 다음 요청 순차적으로 진행하게 된다. 자바스크립트는 기본적으로 동기방식인데 자바스크립트의 라이브러리들은 대체적으로 비동기 방식으로 진행된다. 비동기 방식은 게임 다운 받으면서 카톡하는 느낌이 비동기 방식이다. 모든 요청들을 한 번에 진행하게 된다. import axios from "axios"; import { useState } from "react"; export default function RestGet() { const [aaa, setAaa] = useState(""); // async function zz.. 2022. 3. 20. 리액트 async와 await (feat. rest-API, graphql-API) 동기와 비동기 리액트에서 async와 await를 알아보기 전에 동기와 비동기에 대해 알아봐야 한다. 동기는 API를 요청 응답하는데 있어서 하나의 응답이 끝난 이후에 요청이 들어가는 방식이다. 비동기는 동기와 달리 여러 일을 할 때 사용한다. 예를 들어 네이버의 경우 뉴스의 게시글 목록을 가져오는 동시에 상품 목록을 가져오는 경우에 해당한다. 스마트폰에서 게임을 다운로드하면서 카톡 하는 나의 모습이 비동기의 모습과 같다. async와 await rest-API나 graphql-API 를 사용해서 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용하는데 응답 결과를 변수에 담아서 사용하려면 통신이 완료될 때까지 기다려야 한다. 그때 사용하는 것이 async와 await이다. // mutati.. 2022. 1. 13. 이전 1 다음
