0%

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

이번에는 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

apollo dev tools

이 글은 니꼴라스님의 동영상 강의 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 파일을 생성한다.

1
2
3
4
5
6
7
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 파일을 생성한다.

1
2
3
4
5
6
7
8
9
10
11
12
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 파일 생성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 쿼리를 사용하여 데이터를 조회한다. titlerating 데이터를 가져와서 화면에 출력할 것이다.


App.js 파일을 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 일자 소식을 전합니다. 이번 주 주요 내용은 다…


Originally posted on http://steemit.com