동기 통신과 비동기 통신

❓ 동기 통신, 비동기 통신

• 동기 통신 : 서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신
  • 동기 실행 방식은 등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다려준 후 게시글 불러오기 과정이 실행되기 때문에 문제없이 작업이 가능하다.
• 비동기 통신 : 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신
  • 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다.
  • 비동기 통신은 요청들 사이에 서로 기다려 줄 필요가 없는 경우, 여러 가지 요청을 동시에 처리해 줄 때 사용된다.
  • 훨씬 더 효율적이므로, 기본적으로 비동기로 작동하는 것이 좋다.

🔎 REST-API 에서 동기/비동기 실행

• 순수 자바스크립트에서는 동기적으로 작동한다.
• axios(rest-api) 등 외부 라이브러리들은 대부분 비동기적으로 작동한다.

비동기 통신

• 데이터의 요청과 응답을 위해 axios를 사용하여 비동기 통신을 사용하는 경우
• 해당 코드를 실행하면 콘솔창에는 리턴된 Promise 객체가 보여지게 된다.

import axios from "axios"

// 비동기 통신
function asynchronous() {
    const data = axios.get('https://koreanjson.com/users/1')
    console.log(data)   // Promise
}

❓ Promise 객체

• 자바스크립트에서 비동기 처리에서 사용되는 객체
• Promise에는 3가지 상태가 있다.
  • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않는 상태
  • Fullfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
  • Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

동기 통신 ( async/await )

• 비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서는 async/await 가 필요하다.
• await 가 작성된 부분의 코드 실행이 완전히 완료되기 전까지 하단의 코드로 실행이 넘어가지 않는다.
• 따라서 완전히 완료된 후 완성된 데이터를 받아올 수 있다.

// 동기 통신
async function synchronous() {
    const data = await axios.get('https://koreanjson.com/users/1')
    console.log(data)
}

📌 호이스팅을 고려 + REST-API 동기/비동기 통신

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)
        console.log(result.data)
        console.log(result.data.title)
        setTitle(result.data.title)
    }

    return(
        <>
            {/* 비동기 버튼 */}
            <button onClick={onClickAsync}>Rest-API 비동기 방식으로 요청하기</button>

            {/* 동기 버튼 */}
            <button onClick={onClickSync}>Rest-API 동기 방식으로 요청하기</button>

            <div>{title}</div>
        </>
        
    )
}