React에서 GraphQL 사용법

 

GraphQL은 페이스북에서 개발한 데이터 쿼리 언어로, 효율적인 데이터 요청과 관리를 가능하게 합니다. REST API와 달리 클라이언트가 필요한 데이터를 정확히 명시할 수 있어 불필요한 데이터를 요청하지 않고도 원하는 정보를 얻을 수 있습니다. React와 함께 GraphQL을 사용하면, 강력한 사용자 경험을 제공할 수 있습니다. 이번 글에서는 React 애플리케이션에서 GraphQL을 효과적으로 사용하는 방법을 알아보겠습니다.

---

1. GraphQL의 기본 개념 이해

GraphQL은 다음과 같은 주요 개념을 기반으로 동작합니다:

1-1. 스키마와 타입

GraphQL API는 스키마를 통해 데이터 구조를 정의합니다. 스키마는 타입과 필드를 명확히 정의하며, 클라이언트는 이를 바탕으로 데이터를 요청합니다.

예를 들어, 다음은 간단한 스키마 정의입니다:

schema {
  query: Query
}

type Query {
  user(id: ID!): User
}

type User {
  id: ID
  name: String
  email: String
}

이 스키마는 user라는 쿼리를 통해 id, name, email 필드를 가진 사용자를 조회할 수 있음을 나타냅니다.

1-2. 쿼리와 변이 (Mutation)

• 쿼리는 데이터를 조회할 때 사용됩니다.
• **변이(Mutation)**는 데이터를 생성, 수정, 삭제할 때 사용됩니다.

쿼리 예:

{
  user(id: "1") {
    name
    email
  }
}

변이 예:

mutation {
  updateUser(id: "1", name: "New Name") {
    id
    name
  }
}

---

2. React 프로젝트에 GraphQL 설정하기

React 애플리케이션에서 GraphQL을 사용하려면 몇 가지 설정 단계가 필요합니다. 가장 인기 있는 GraphQL 클라이언트 라이브러리는 Apollo Client입니다. 이를 사용해 GraphQL과 React를 통합하는 방법을 살펴보겠습니다.

2-1. 환경 설정

1. 필수 라이브러리 설치
2. npm install @apollo/client graphql
3. Apollo Client 설정 프로젝트에 Apollo Client를 설정하려면 ApolloClient, InMemoryCache, ApolloProvider를 사용합니다.
4. import React from 'react'; import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'; const client = new ApolloClient({ uri: 'https://your-graphql-endpoint.com/graphql', cache: new InMemoryCache(), }); const App = () => (
   My React App
   ); export default App;

2-2. GraphQL 쿼리 작성

쿼리를 실행하려면 useQuery 훅을 사용합니다.

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

const UserProfile = ({ userId }) => {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
};

export default UserProfile;

---

3. GraphQL 변이 실행하기

데이터를 생성, 수정, 삭제하려면 useMutation 훅을 사용합니다.

3-1. 변이 정의

import React from 'react';
import { useMutation, gql } from '@apollo/client';

const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, name: $name) {
      id
      name
    }
  }
`;

const UpdateUserName = ({ userId }) => {
  const [updateUser, { data, loading, error }] = useMutation(UPDATE_USER);

  const handleUpdate = () => {
    updateUser({ variables: { id: userId, name: "Updated Name" } });
  };

  if (loading) return <p>Updating...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <button onClick={handleUpdate}>Update Name</button>
      {data && <p>Updated Name: {data.updateUser.name}</p>}
    </div>
  );
};

export default UpdateUserName;

---

4. GraphQL의 장점과 React 통합의 이점

4-1. 요청 최적화

GraphQL은 필요한 데이터만 요청할 수 있어 네트워크 리소스를 절약합니다. 이는 모바일 환경에서도 유용합니다.

4-2. 타입 안정성과 자가 문서화

스키마를 기반으로 데이터 구조가 명확히 정의되므로, 코드 작성 중 오류를 줄이고 유지보수가 쉬워집니다.

4-3. React 상태 관리와의 통합

Apollo Client는 캐싱을 지원하므로 전역 상태 관리를 더욱 간단하게 만듭니다. 예를 들어, 데이터를 업데이트하면 자동으로 UI가 갱신됩니다.

---

결론

React에서 GraphQL을 사용하면 데이터 요청과 관리를 더욱 효율적으로 처리할 수 있습니다. 특히 Apollo Client와 같은 라이브러리를 활용하면 설정이 간단하며, 쿼리와 변이를 통해 강력한 사용자 경험을 제공할 수 있습니다. 위에서 설명한 내용을 토대로 프로젝트에 GraphQL을 적용해 보세요!