[React] 동기 / 비동기 통신

오늘은 동기 비동기 통신에 대해 공부했다

간단하게 동기 통신은 서버 컴퓨터가 작업이 끝날 때 까지 기다리는 통신이고

비동기 통신은 안기다리는 건데 비동기 통신은 요청(request)들이 서로 기다릴 필요가 없을 대 사용한다.

비동기 통신이 더 효율적이며 동기 통신은 필요할 때 사용하면 된다.

 

JavaScript는 기본적으로 동기적으로 작동하지만, 최신 라이브러리(설치해서 쓰는 애들)들은 기본적으로 비동기로 작동한다. (비동기가 더 효율적이기 때문에)

 

VS code에서 동기 / 비동기 통신 사용하기

실습을 위해 아래 페이지의 API를 사용할 것이다

https://koreanjson.com/

Korean JSON

 

더 정확히는 ( https://koreanjson.com/posts/1 ) 를 쓸것임

 

 

 

그 전에!! 지금까지는 함수를 사용할 때

 

function 함수이름() {
    //내용
}

 

이렇게 썼는데 JavaScript에서는 이렇게 쓰면 중복이 될 수 있기 때문에 앞으로는

 

 const 함수이름 = () => {
   //내용
 }

 

이렇게 함수 표현을 화살표 함수로 변경해서 쓰기로 했다.

 

 

비동기(Asynchronous) 통신

const data = axios.get("https://koreanjson.com/posts/1")
console.log(data) //Promis

 

axios 라이브러리는 비동기적으로 작동한다. 콘솔에는 Promis라는 결과값을 받게 되는데 데이터를 받아오지 못하고 줄거야! 하고 약속만 해 놓은 것이다. 데이터를 받기 위해서는 axios.get 전에 데이터가 올 때 까지 기다리겠다는 명령을 해야하는데 그 명령어가 바로 await이다.

 

 

동기(Syncronous) 통신

await를 쓰기 위해서는 async라는 명령어가 필요하다. 둘이 짝궁이라고 생각하면 된다!

async는 함수 앞에 적어서 사용한다.

  const  onClickSync = async() => {
    const result = await axios.get("https://koreanjson.com/posts/1");
    console.log(result);
  }

 

 

실습타임!!😆(Rest-API)

import axios from "axios";

export default function RestGetPage() {
  
  //비동기통신 함수
  const onClickAsync = () => {
    const result = axios.get("https://koreanjson.com/posts/1");
    console.log(result);
  };
  
  //동기통신 함수
  const onClickSync = async () => {
    const result = await axios.get("https://koreanjson.com/posts/1");
    console.log(result);
  };

  return (
    <>
      <div>동기 비동기 통신 실습</div>
      <div>
        <button onClick={onClickAsync}>REST-API(비동기) 요청하기</button>
        <button onClick={onClickSync}>RESP-API(동기) 요청하기</button>
      </div>
    </>
  );
}

 

 

 

 

비동기 요청 버튼과 동기 요청 버튼을 만들어 각각 클릭해보면 첫번째는 Promis 두번째는 데이터를 가져 오는 것을 확인할 수 있다. 근데 보면 가져온 데이터에 뭔가 많은데 data의 내용을 가져와서 화면에 표시하도록 다시 코드를 작성해보면

 

 

import axios from "axios";
import { useState } from "react";

export default function RestGetPage() {
  //state
  const [title, setTitle] = useState("");

  //비동기통신 함수
  const onClickAsync = () => {
    const result = axios.get("https://koreanjson.com/posts/1");
    console.log(result);
  };
  
  //동기통신 함수
  const  onClickSync = async() => {
    const result = await axios.get("https://koreanjson.com/posts/1");
    console.log(result.data);
    console.log(result.data.title);
    setTitle(result.data.title);
  }



  return (
    <>
      <div>동기 비동기 통신 실습</div>
      <div>
        <button onClick={onClickAsync}>REST-API(비동기) 요청하기</button>
        <button onClick={onClickSync}>RESP-API(동기) 요청하기</button>
        <div>{title}</div>
      </div>
    </>
  );
}

 

 

 

 

 

실습타임!!😆(Graphql-API)

이번에는 그래프큐엘 에이피아이를 이용해서 실습을 해봤다. rest-api랑은 다르게 use~로 시작한다.

 

const [실행함수] = useMutation()

 

useMutation하고 () 안에 세팅을 해주는데 꽤 길기 때문에 따로 변수를 만들어서 넣어준다.

 

const CREATE_BOARD = gql`
  mutation {
    createBoard(
      writer: "유리"
      title: "오늘의 기분"
      contents: "배고프고 마라탕 먹고싶고"
    ) {
      _id
      number
      message
    }
  }
`;

변수명은 CREATE_BOARD 주로 대문자로만 이용해서 만든다고 한다. gql은 Graphql의 약자이고 이것을 이용하기 위해서는

 

import { gql, useMutation } from "@apollo/client";

 

을 import 해주어야 한다.

 

import { gql, useMutation } from "@apollo/client";

const CREATE_BOARD = gql`
  mutation {
    createBoard(
      writer: "유리"
      title: "오늘의 기분"
      contents: "배고프고 마라탕 먹고싶고"
    ) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [나의함수] = useMutation(CREATE_BOARD);

  const onClickSubmit = async () => {
    const result =  await 나의함수()
    console.log(result)
  };

  return (
    <div>
      <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>
    </div>
  );
}

 

여기까지 코드를 작성해 보았는데 const [] 안에 한글로 된 실행함수를 만들 수 있다는 건 쫌 신기..

useMutation 자체가 비동기로 작동하기 때문에 동기 처리를 위해 async - await를 사용해 주었다.