이번에는 GraphQL과 React를 사용하여 웹앱을 개발합니다. apollo-graphql에서 제공하는 react-apollo를 사용하면 웹앱을 정말 쉽게 개발 할 수 있습니다. [GraphQL #1] GraphQL로 API 서버 만들기에서 이어지는 내용입니다.

우리는 크롬 브라우저에서 개발할 것입니다. 개발하기 전에 아래 크롬 브라우저 확장 프로그램을 설치해주세요.

Apollo Client Developer Tools 설치

https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm

React Developer Tools 설치

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

이 글은 니꼴라스님의 동영상 강의 GraphQL, Apollo로 웹앱 만들기 를 학습하고 정리한 내용입니다.

* * *

create-react-app 설치

create-react-app를 설치한다.

$ npm install -g create-react-app

create-react-app를 사용하려면 Node 8.10.0 이상이어야 한다.

create-react-app 도구를 사용하기 위해 node를 업데이트한다.

$ brew update
$ brew upgrade node

참고로 나는 MacOS라서 homebrew를 사용하여 node를 업데이트했다.

─

프로젝트 생성

create-react-app 도구를 사용하여 프로젝트를 생성한다.

$ npx create-react-app movieql-client

create-react-app를 사용한 프로젝트 생성은 npx, npm, yarn 으로 생성하는 방법이 있다. 자세한 내용은 여기를 참고한다.

─

필요한 모듈 설치

react router를 사용하기 위해 react-router-dom를 설치한다.

$ yarn add react-router-dom

그리고 react-apollo를 설치한다.

$ yarn add apollo-boost react-apollo graphql-tag graphql

─

구현하기

apolloClient.js 파일을 생성한다.

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: 'http://localhost:4000'
});

export default client;

ApolloClient 객체의 uri에는 GraphQL API 서버 주소를 등록한다.

여기서 사용한 graphql API 서버 소스는 깃허브에 업로드되어 있다.
https://github.com/anpigon/movieql/

queries.js 파일을 생성한다.

import gql from "graphql-tag";

export const HOME_PAGE = gql`
  query {
    movies(limit:50, rating: 7) {
      id
      title
      rating
      medium_cover_image
    }
  }
`;

GraphQL API 서버에서 데이터를 조회하기 위한 쿼리문을 입력한다.

Home.js 파일 생성한다.

import React from "react";
import { Query } from "react-apollo";
import { HOME_PAGE } from "./queries";

const Home = () => (
  <Query query={HOME_PAGE}>
    {
      ({ loading, data, error }) => {
        if(loading) return <span>loading</span>;
        if(error) return <span>ERROR</span>;
        return data.movies.map(movie => (
          <h2 key={movie.id}>
            {movie.title} / {movie.rating}
          </h2>
        ));
      }
    }
  </Query>
);

export default Home;

앞에서 만든 HOME_PAGE 쿼리를 사용하여 데이터를 조회한다. title과 rating 데이터를 가져와서 화면에 출력할 것이다.

App.js 파일을 수정한다.

import React, { Component } from 'react';
import { HashRouter as Router, Route } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import client from "./apolloClient";
import Home from "./Home";

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Router>
          <main>
            <Route exact={true} path={"/"} component={Home} />
          </main>
        </Router>
      </ApolloProvider>
    );
  }
}

export default App;

ApolloProvider 컴포넌트를 사용하여 Router를 감싼다. 그리고 라우트 /에 Home 컴포넌트를 등록한다.

아래는 결과 화면이다.

구현하고 보니 코드 라인 수가 몇줄 안된다. 내 생각에는 apollo-graphql를 사용하면 개발시간을 절약할 수 있을 것 같다.

끝.

---

_{Sponsored ( Powered by dclick )}

바이트볼 주간 뉴스레터(11월 9일자), Delta 다이렉트 지원, 프리랜서 작가 채용, WCG 공헌자 천 명 돌파

^{바이트볼 주간 뉴스레터 2018. 11. 09 일자 소식을 전합니다. 이번 주 주요 내용은 다...}