이번에는 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를 설치한다.

1	$ npm install -g create-react-app

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

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

1 2	$ brew update $ brew upgrade node

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

─

프로젝트 생성

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

1	$ npx create-react-app movieql-client

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

─

필요한 모듈 설치

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

1	$ yarn add react-router-dom

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

1	$ 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를 사용하면 개발시간을 절약할 수 있을 것 같다.

코딩, 독서, 여행, 영화, 맛집

[GraphQL #2] GraphQL로 React앱 만들기