[javascript] 리액트 프레임워크에서 GraphQL을 사용하는 방법은 어떻게 되나요?

05 Dec 2023

javascript

GraphQL은 리액트 애플리케이션에서 데이터를 효율적으로 가져오고 관리할 수 있는 쿼리 언어입니다. 리액트와 GraphQL을 함께 사용하면 필요한 데이터만 가져와서 애플리케이션 성능을 향상시킬 수 있습니다.

GraphQL을 리액트 프로젝트에 추가하려면 몇 가지 단계를 따라야합니다.

1. 의존성 설치하기

먼저, 프로젝트의 루트 디렉토리에서 터미널을 열고 다음 명령을 실행하여 필요한 패키지를 설치해야합니다.

npm install graphql react-apollo apollo-boost

2. Apollo Client 설정하기

Apollo Client는 GraphQL 데이터를 관리하는 클라이언트 라이브러리입니다. 이를 사용하여 GraphQL 요청을 만들고 데이터를 가져올 수 있습니다.

리액트 애플리케이션의 최상위 컴포넌트를 감싸는 ApolloProvider를 사용하여 Apollo Client를 설정해야합니다. 예를 들면 다음과 같습니다.

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

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql', // GraphQL 서버의 엔드포인트 URL
});

function App() {
  return (
    <ApolloProvider client={client}>
      {/* 나머지 컴포넌트들 */}
    </ApolloProvider>
  );
}

export default App;

3. GraphQL 쿼리 작성하기

이제 GraphQL 쿼리를 작성할 차례입니다. Apollo Client를 사용하면 쿼리를 작성하는데 도움이 되는 도구들을 제공합니다.

컴포넌트에서 데이터를 가져오려면 react-apollo 라이브러리의 Query 컴포넌트를 사용해야합니다. 예를 들면 다음과 같습니다.

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const GET_USERS = gql`
  query {
    users {
      id
      name
      email
    }
  }
`;

function Users() {
  return (
    <Query query={GET_USERS}>
      {({ data, loading, error }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error: {error.message}</p>;

        return (
          <ul>
            {data.users.map(user => (
              <li key={user.id}>
                {user.name} ({user.email})
              </li>
            ))}
          </ul>
        );
      }}
    </Query>
  );
}

export default Users;

위 코드에서는 GET_USERS라는 GraphQL 쿼리를 정의하고, Query 컴포넌트를 사용하여 해당 쿼리를 실행합니다. 결과 데이터를 이용하여 사용자 목록을 보여줍니다.

이제 리액트 앱에서 GraphQL을 사용하는 방법을 알게 되었습니다. Apollo Client를 통해 강력하고 효율적인 데이터 관리가 가능하므로, 리액트와 함께 GraphQL을 사용하는 것은 매우 유용합니다.