타입스크립트(TypeScript)와 GraphQL은 각각 데이터 타입과 쿼리 지정에 효과적으로 사용되는 강력한 도구입니다. 이 글에서는 타입스크립트를 사용하여 GraphQL에서 가져온 데이터를 효과적으로 다시 사용하는 방법에 대해 알아보겠습니다.

1. GraphQL 쿼리 결과 타입화하기

먼저, GraphQL 쿼리 결과를 타입스크립트로 타입화하여 재사용하기 쉽도록 만들어야 합니다. 예를 들어, 다음과 같이 GraphQL 쿼리를 정의하고 그 결과를 타입으로 선언할 수 있습니다.

// GraphQL 쿼리 정의
const GET_USER_INFO = gql`
  query UserInfo($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
    }
  }
`;

// GraphQL 쿼리 결과 타입 선언
interface UserInfo {
  user: {
    id: string;
    name: string;
    email: string;
  };
}

2. 재사용을 위한 타입 정의하기

다음으로, 재사용 가능한 타입들을 정의하여 타입 안정성을 보장할 수 있습니다. 예를 들어, 여러 컴포넌트에서 사용될 수 있는 유형의 데이터를 재사용할 때 타입 정의가 중요합니다.

// 재사용을 위한 타입 정의
interface UserCardProps {
  user: UserInfo['user'];
  onClick: () => void;
}

3. 데이터 재사용하기

이제 정의한 타입과 GraphQL 쿼리 결과를 사용하여 데이터를 효과적으로 재사용할 수 있습니다. 예를 들어, 다음과 같이 컴포넌트에서 GraphQL에서 가져온 데이터를 사용할 수 있습니다.

// 데이터 재사용을 위한 컴포넌트
const UserCard: React.FC<UserCardProps> = ({ user, onClick }) => {
  return (
    <div onClick={onClick}>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </div>
  );
};

결론

타입스크립트와 GraphQL을 함께 사용할 때, 데이터를 효과적으로 재사용하기 위해 타입화된 GraphQL 쿼리 결과와 재사용을 위한 타입 정의가 중요합니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 재사용 가능한 컴포넌트를 구축하는 데 도움이 될 것입니다.

참고 자료: 타입스크립트 공식 문서