React, Apollo graphql을 이용한 todo list 만들기

요약

 

Apollo GraphQL을 사용하여 React Todo List를 만드는 방법: Apollo GraphQL 설치 및 설정, React 컴포넌트 생성, Apollo GraphQL 쿼리 생성, React 컴포넌트에 쿼리 연결. 이렇게 하면 React Todo List 앱을 만들 수 있습니다.

---

React Todo List 만들기

Apollo GraphQL을 사용하여 React Todo List를 만들고자 합니다. Apollo GraphQL은 다양한 백엔드 데이터베이스와 연결하는 용이한 방법을 제공하는 강력한 프레임워크입니다. 이 가이드는 React Todo List 앱을 만드는 방법 을 설명합니다.

 

1. Apollo GraphQL 설치하기

우선, React Todo List 앱을 만들기 위해 Apollo GraphQL을 설치해야 합니 다. 이는 npm을 사용하여 쉽게 할 수 있습니다. 다음 명령어를 사용하여 Apollo GraphQL을 설치합니다.

 npm install apollo-boost react-apollo graphql --save

 

2. Apollo GraphQL 설정하기

Apollo GraphQL을 설치한 후, 다음으로 Apollo GraphQL을 설정합니다. 이는 다음과 같이 할 수 있습니다.

 import ApolloClient from 'apollo-boost';
 const client = new ApolloClient({ 
	 uri: 'http://localhost:4000/graphql' 
 });

 

3. React 컴포넌트 생성하기

Apollo GraphQL이 설정된 후, 다음으로 React 컴포넌트를 생성해야 합니다. 이는 다음과 같이 할 수 있습니다. 

import React from 'react';
import { ApolloProvider } from 'react-apollo';

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>React Todo List</h2>
    </div>
  </ApolloProvider>
);

export default App;

 

4. Apollo GraphQL 쿼리 생성하기

Apollo GraphQL이 설정되고 React 컴포넌트가 생성된 후, 다음으로 Apollo GraphQL 쿼리를 생성해야 합니다. 이는 다음과 같이 할 수 있습니다.

import { gql } from 'apollo-boost';

const GET_TODOS = gql`
  {
    todos {
      id
      text
      completed
    }
  }
`;

 

5. React 컴포넌트에 쿼리 연결하기

Apollo GraphQL 쿼리가 생성된 후, 다음으로 React 컴포넌트에 쿼리를 연결 합니다. 이는 다음과 같이 할 수 있습니다.

import { Query } from 'react-apollo';

const Todos = () => (
  <Query query={GET_TODOS}>
    {({ loading, error, data }) => {
      if (loading) return 'Loading...';
      if (error) return `Error! ${error.message}`;

      return (
        <ul>
          {data.todos.map(todo => (
            <li key={todo.id}>
              {todo.text} - {todo.completed ? 'Completed' : 'Pending'}            </li>
          ))}
        </ul>
      );
    }}
  </Query>
);

 

결론

React Todo List 앱을 만드는 데 Apollo GraphQL을 사용하는 것은 간단합니 다. 우선, Apollo GraphQL을 설치하고 설정합니다. 그 다음, React 컴포넌 트를 생성하고 Apollo GraphQL 쿼리를 생성합니다. 마지막으로 React 컴포 넌트에 쿼리를 연결합니다. 이렇게 하면 React Todo List 앱을 만들 수 있 습니다.