이 글은 Next.js 기준으로 작성했습니다.

---

1. HTTP

HTTP는 두 컴퓨터가 텍스트 데이터를 주고받는 통신 규약입니다.

HTTP를 통해 요청(request)과 응답(response)을 주고받습니다.

• HTTP 요청(Request) 웹 브라우저에서 실행 중인 프론트엔드가 작성한 게시물 텍스트 데이터를 HTTP로 백엔드에 보내고, 데이터베이스에 저장해 달라고 **요청**합니다.

• HTTP 응답(Response) 요청을 받은 백엔드가 성공, 실패 같은 처리 결과를 **응답**합니다.

2. HTTP API란?

HTTP로 프로그램끼리 소통하는 API를 말합니다. 흔히 보는 Open API, Facebook API, Kakao API 대부분이 HTTP 통신 규칙을 사용합니다.

API에 요청할 때 보내는 데이터는 **API 함수의 인자**이고, 응답으로 받는 데이터는 **API 함수의 반환값**입니다.

2-1 REST-API와 GraphQL-API의 차이점

REST-API는 **API 이름이 홈페이지 주소**처럼 생겼습니다.

GraphQL-API는 **API 이름이 일반적인 함수**와 같습니다.

2-2 요약

구분	REST-API	GraphQL-API
정의와 요청방식	형태 정의와 데이터 요청 방법이 연결되어 있음	형태 정의와 데이터 요청이 완전히 분리되어 있음
요청	여러 Resource에 접근하고자 할 때 여러 번의 요청이 필요	GraphQL에서는 한번의 요청에서 여러 Resource에 접근 가능
응답	Resource의 크기와 형태를 서버에서 결정	Resource에 대한 정보만 정의, 필요한 크기와 형태는 client단에서 요청 시 결정
아키텍처	URI가 Resource를 나타내고 Method가 작업의 유형을 나타냄	GraphQL Schema가 Resource를 나타내고 Query, Mutation 타입이 작업의 유형을 나타냄.
요청에 따라 응답방식	각 요청은 해당 엔드포인트에 정의된 핸들링 함수를 호출하여 작업을 처리	요청 받은 각 필드에 대한 resolver를 호출하여 작업을 처리

3. React에서 Rest-API 사용법

3-1. axios 설치

터미널에 axios를 프로젝트에 설치해주세요

$ yarn add axios // yarn 사용자

$ npm install axios // npm 사용자

3-2 axios 예제

import {useState} from 'react'
import axios from 'axios'

export default function RestGetPage() {
    const [Title, setTitle] = useState('');

    const onClickSync = async () => {
        // 동기
        const data = await axios.get(`https://koreanjson.com/posts/1`);
        setTitle(data.data.title);
    }

    return (
        <div>
            <button onClick={onClickSync}>REST-API 요청하기</button>
            <p>{Title}</p>
        </div>
    )
}

4. React에서 GraphQL-API 사용법

4-1. GraphQL 설치

터미널에 @apollo/client, graphql를 프로젝트에 설치해주세요

$ npm install @apollo/client graphql

GraphQL을 사용하려면 Apollo Client가 설치되어 있어야 합니다.

4-2 GraphQL 예제

먼저 _app.js에 Apollo를 설정하고, 사용할 페이지에 쿼리를 작성합니다.

_app.js

import '../styles/globals.css'
import {ApolloClient , ApolloProvider , InMemoryCache} from '@apollo/client'

function MyApp({ Component, pageProps }) {

  const client = new ApolloClient({
    uri : "graphql주소란",
    cache : new InMemoryCache() 
  })

  return (
    <>
      <ApolloProvider client ={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    </>
  )
}

export default MyApp

/boards/add/index.js

import {gql, useMutation} from '@apollo/client'

const CREATE_BOARD = gql`
    mutation{
        createBoard(writer: "작성자", title: "제목", contents: "내용"){
            _id
            number
            message
        }
    }
`;

export default function GraphqlMutationPage() {
    const [createBoard] = useMutation(CREATE_BOARD)

    const onClickSubmit = async () => {
        const data = await createBoard();
        console.log(data)
    }

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

}