[React] REST API와 GraphQL 차이 및 예제

 

 

React 애플리케이션과 서버 간의 데이터 통신을 처리하는 방법은 주로 두 가지입니다. 서버와의 효율적인 데이터 통신을 위해 RESTful API 또는 GraphQL을 사용할 수 있습니다. 이러한 API는 데이터 엔드포인트와 데이터 스키마를 제공하며, 클라이언트는 이러한 API를 사용하여 데이터를 요청하고 업데이트합니다. 이 두 가지의 기본적인 개념과 차이를 알아보도록 하겠습니다.

 

 

REST API (Representational State Transfer)

- 구조적인 접근 방식

REST는 자원(리소스)을 URL 경로로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 자원을 조작합니다. 각 엔드포인트(URI)는 특정 자원 또는 컨트롤러를 나타내며, 각각의 HTTP 메서드는 해당 자원에 대한 작업을 수행합니다.

 

- 단순하고 직관적

REST는 간단하며, URL을 통한 엔드포인트 접근과 HTTP 메서드 사용으로 흔히 사용됩니다. 이러한 단순성은 이해하고 구현하기 쉽게 만듭니다.

 

- 과다 또는 미흡한 데이터

REST 엔드포인트는 일반적으로 클라이언트가 요청한 데이터를 포함하거나, 클라이언트는 필요한 데이터만 선택할 수 있습니다. 이로 인해 네트워크 트래픽이 과도하거나 불필요한 데이터를 전송할 수 있습니다.

 

 

GraphQL

- 유연한 쿼리 언어

GraphQL은 클라이언트가 필요한 데이터를 정확하게 쿼리할 수 있는 강력한 쿼리 언어를 제공합니다. 클라이언트는 원하는 필드 및 관계를 지정하고, 서버는 해당 요청에 대해 정확한 응답을 제공합니다.

 

- 단일 엔드포인트

GraphQL은 단일 엔드포인트를 가집니다. 클라이언트는 이 엔드포인트를 통해 모든 데이터 요청을 수행할 수 있으므로 여러 REST 엔드포인트를 호출할 필요가 없습니다.

 

- 과도한 쿼리 가능

클라이언트가 자유롭게 원하는 데이터를 요청할 수 있기 때문에, 서버에 부담을 줄 수 있습니다. 서버 측에서는 요청을 통제하고 보안을 유지하는 것이 중요합니다.

 

- 실시간 데이터

GraphQL은 실시간 데이터 요청을 처리하기에 용이하며, 구독(subscription)을 통해 실시간 업데이트를 제공할 수 있습니다.

 

 

예제

사용자 목록을 가져오는 예제를 들어 REST API와 GraphQL 둘의 차이를 더 자세히 확인해보겠습니다. 먼저 REST API 부터 확인해보겠습니다.

 

[REST API]

REST API 요청 (GET)

RESTful 엔드포인트를 사용하여 사용자 목록을 가져옵니다.

// RESTful 엔드포인트
GET /users

 

React에서 REST API 호출

React에서 fetch 또는 axios와 같은 HTTP 클라이언트 라이브러리를 사용하여 데이터를 요청

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      )}
    </ul>
  );
}

export default UserList;

 

REST API 응답

서버는 JSON 형식으로 사용자 목록을 응답합니다.

[
  { "id": 1, "name": "John" },
  { "id": 2, "name": "Alice" },
  { "id": 3, "name": "Bob" }
]

 

 

 

[GraphQL]

GraphQL 쿼리

GraphQL 쿼리를 사용하여 원하는 데이터를 요청합니다.

query {
  users {
    id
    name
  }
}

 

React에서 GraphQL 호출

React에서 GraphQL 클라이언트 라이브러리를 사용하여 데이터를 요청합니다. 예를 들어, Apollo Client를 사용할 수 있습니다.

import React from 'react';
import { useQuery } from '@apollo/client';
import gql from 'graphql-tag';

const GET_USERS = gql`
  query {
    users {
      id
      name
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const users = data.users;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      )}
    </ul>
  );
}

export default UserList;

 

GraphQL 응답

GraphQL 서버는 클라이언트의 쿼리에 정확하게 일치하는 데이터를 응답합니다.

{
  "data": {
    "users": [
      { "id": 1, "name": "John" },
      { "id": 2, "name": "Alice" },
      { "id": 3, "name": "Bob" }
    ]
  }
}

 

 

차이점 요약

• REST API는 고정된 엔드포인트로 데이터를 가져오며, GraphQL은 클라이언트가 원하는 데이터를 쿼리로 요청합니다.
• REST API는 서버가 데이터 형식을 결정하며, GraphQL은 클라이언트가 요청한 형식대로 응답합니다.
• GraphQL은 필요한 데이터만 가져오므로 과다 또는 미흡한 데이터 전송 문제를 해결합니다.
• GraphQL은 단일 엔드포인트를 사용하므로 여러 RESTful 엔드포인트를 호출할 필요가 없습니다.

 

REST API와 GraphQL은 각각 장단점이 있으며, 프로젝트 요구 사항에 따라 선택해야 합니다. GraphQL은 특히 클라이언트가 정확하게 원하는 데이터를 요청해야 하는 경우나 실시간 데이터 요구사항이 있을 때 매우 강력한 도구입니다.