[SW정글][나만무 준비] React Query 와 Graph QL

JST·2023년 10월 27일

나만무 준비

목록 보기
1/3

서버 상태 관리 : react query (원래 클라이언트에서 서버와 클라이언트 상태 관리를 둘 다 해줘야 했었다면, react query 를 사용하면 클라이언트 상태 관리만 해주면 된다.)
클라이언트 상태 관리 : redux
api 요청 : graph ql, rest api

React Query

리엑트 쿼리는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술.

데이터베이스에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데, 이 때 서버에서 가져오는 데이터를 서버의 상태 라고 한다.

서버는 특정 시점에 클라이언트의 요청에 대해 데이터 베이스에서 유저 정보를 가져와 서버의 상태 값을 만들어낸다. 데이터 베이스에 있는 값을 그대로 클라이언트에게 전달 할 수도 있고, 요청에 담긴 특정 값을 이용해 정보를 가공 해서 메모리에 들고 있을 수 있다.
그리고 이 정보를 클라이언트에게 전달해준다.

react query 가 필요한 이유

앱이 간단하다면 useState와 contextAPI만 사용하더라도 대부분의 client state를 다룰 수 있지만 복잡도가 올라가고 성능 향상에 대한 필요성이 생기는 시점에서는 상태 관리 도구를 선택하는게 합리적이다.

react query는 hook 기반의 로직들로 되어있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해준다.

리엑트 쿼리는 데이터의 캐시 처리를 간편하게 할 수 있는 인터페이스를 제공합니다.

  • 몇 초 이후에는 데이터가 유효하지 않은 것으로 간주하고 데이터를 다시 불러온다.
  • 데이터에 변경점이 있는 경우에만 리렌더링을 유발한다.
  • 유저가 탭을 이동했다가 다시 돌아왔을 때 데이터를 다시 불러온다.
  • 데이터를 다시 호출할때 응답이 오기 전까지는 이전 데이터를 계속 보여준다. 필요에 따라서는 로딩바와 같은 대안 UI를 보여주기 위해 loading state를 기본적으로 제공한다.

즉, 클라이언트와 서버의 상태 값을 일치시켜줘야 하는 요구사항에서 부가적으로 생길 수 있는 로직들을 리엑트 쿼리의 api와 인터페이스로 간단하게 해결할 수 있도록 도와주는 것입니다.

GraphQL

쿼리 언어

GraphQL 은 API를 위한 쿼리 언어(Query Language)이며 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다.

쿼리 언어(Query Language)
쿼리 언어는 정보를 얻기 위해 보내는 질의문(Query)를 만들기 위해 사용되는 컴퓨터 언어이다. 가장 잘 알려져있는 예시로는 데이터베이스 시스템에 저장된 데이터를 가져오기 위해 사용하는 SQL이 있다.

GraphQL(Graph Query Language)
SQL이 데이터베이스 시스템으로부터 데이터를 가져오는 목적을 가진다면, GraphQL은 클라이언트가 데이터를 서버로부터 가져오는 것을 목적으로 한다.

REST와의 차이점

  • GraphQL은 보통 하나의 엔드포인트를 가진다.
  • GraphQL은 요청할 때 사용하는 쿼리에 따라 다른 응답을 받을 수 있다.
  • GraphQL은 원하는 데이터(response)만 받을 수 있다.

엔드포인트
REST API는 보통 여러 엔드포인트를 가지며 각각의 엔드포인트가 동일한 응답을 반환한다.
하지만, GraphQL은 보통 하나의 엔드포인트만을 사용하며 요청하는 쿼리에 따라 다른 응답을 반환하는 방식이다.

  • REST 
// REST API request
GET, https://swapi.dev/api/people/1

// REST API response
{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "http://swapi.dev/api/planets/1/",
    "films": ["http://swapi.dev/api/films/1/", "http://swapi.dev/api/films/2/", "http://swapi.dev/api/films/3/", "http://swapi.dev/api/films/6/"],
    "species": [],
    "vehicles": ["http://swapi.dev/api/vehicles/14/", "http://swapi.dev/api/vehicles/30/"],
    "starships": ["http://swapi.dev/api/starships/12/", "http://swapi.dev/api/starships/22/"],
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "http://swapi.dev/api/people/1/"
}
  • Graph QL
// GraphQL request
query {
    person(personID: 1) {
        name
        height
        mass
    }
}

// GraphQL response
{
    "data": {
        "person": {
            "name": "Luke Skywalker",
            "height": 172,
            "mass": 77
        }
    }
}

Graph QL의 장점

REST API로는 3개의 데이터를 가져오기 위해 13개의 불필요한 데이터까지 함께 가져와야 했지만, GraphQL은 클라이언트에서 필요한대로 쿼리를 작성해 원하는 데이터만을 가져올 수 있다.

  • HTTP 요청 횟수를 줄일 수 있다.

  • HTTP 응답 사이즈를 줄일 수 있다.

  • 프론트엔드와 백엔드 개발자의 부담을 덜 수 있다.
    (GraphQL은 request/response 의존도가 많이 없기 때문에, 개발자들의 API 개발 부담을 덜 수 있다.)

Graph QL의 단점

  • 고정된 요청과 응답만 필요할 때에는 query로 인해 요청의 크기가 Restful보다 커질 수 있다.
  • 캐싱이 REST보다 복잡하다.
  • 파일 업로드 구현 방법이 정해져있지 않아 직접 구현해야 한다.

결론

graph ql은 요청은 어렵지만 데이터를 받았을 때의 이점이 있다.
rest api 는 요청은 쉽지만 데이터를 받았을 때 분석하기 어려운 단점이 있다.

때문에 graph ql과 rest api를 동시에 쓰는 경우도 많다.

profile
JST

0개의 댓글