유틸리티 타입: Pick

유틸리티 타입은 TypeScript에서 제공하는 내장된 타입으로, 특정 작업을 간편하게 수행할 수 있도록 도와줍니다. 그 중 하나인 Pick은 객체 타입에서 일부 속성만 선택하여 새로운 타입을 만드는 데 사용됩니다. 이를 통해 코드의 재사용성을 높이고, 필요하지 않은 속성을 제거함으로써 복잡성을 줄일 수 있습니다.

기본 개념

• 목적: 기존의 객체 타입에서 필요한 속성만 추출하여 새로운 타입을 생성합니다.
• 형식: Pick<T, K>
  • 여기서 T는 원본 객체 타입이고, K는 선택하고자 하는 속성의 키를 나열한 유니온입니다.

예시

아래 예시는 직원 정보를 담고 있는 인터페이스를 정의하고, 그 중 일부 속성만 선택하여 새로운 인터페이스를 만드는 과정을 보여줍니다.

interface Employee {
    id: number;
    name: string;
    position: string;
    salary: number;
}

// Employee 인터페이스에서 id와 name만 선택한 NewEmployeeType 생성
type NewEmployeeType = Pick<Employee, 'id' | 'name'>;

const employee1: NewEmployeeType = {
    id: 1,
    name: "홍길동"
};

// 다음과 같은 코드는 오류가 발생합니다.
// const employee2: NewEmployeeType = {
//     id: 2,
//     name: "김철수",
//     position: "개발자" // Error! 'position' 속성이 존재하지 않음
// };

위 코드에서는 NewEmployeeType이란 이름의 새 유형이 만들어졌으며, 이 유형에는 오직 id와 name이라는 두 가지 속성만 포함되어 있습니다. 이렇게 함으로써 우리는 불필요한 정보로 인해 생길 수 있는 혼란을 피할 수 있습니다.

활용 사례

• API 응답 처리

  • 서버로부터 받은 데이터 중 필요한 부분만 사용할 때 유용합니다. 예를 들어 사용자 프로필 데이터를 가져올 경우 전체 데이터 대신 필요한 필드(예 : 이름 및 이메일)만 추출할 수 있습니다.

  interface UserProfile {
      username: string;
      emailAddress: string;
      age?: number;
      address?: string;
  }
  
  type PublicUserProfile = Pick<UserProfile, 'username' | 'emailAddress'>;
  
  const userProfileResponseFromApi = {
      username: "johndoe",
      emailAddress: "john@example.com",
      age: 30,
      address:"123 Main St"
  };
  
  const publicUserProfile : PublicUserProfile = {
     username:userProfileResponseFromApi.username,
     emailAddress:userProfileResponseFromApi.emailAddress
  };
  

• 폼 관리

  • 다양한 폼 필드를 가진 애플리케이션에서는 각기 다른 화면 또는 컴포넌트에 대해 특정 필드들만 필요할 때가 많습니다. 이때 Pick을 사용하면 해당 컴포넌트에 맞는 폼 데이터 구조를 쉽게 만들 수 있습니다.

• 타입 안전성 향상

  • Pick을 사용함으로써 잘못된 키나 불필요한 데이터를 사용하는 것을 방지할 수 있어 코드의 안정성과 유지 보수성이 증가합니다.

결론

Pick 유틸리티 타입은 TypeScript에서 매우 강력한 도구로서 특정 상황에 맞게 객체 형태를 조정하고 정제하는 데 큰 도움이 됩니다. 이러한 기능을 통해 개발자는 더욱 효율적으로 코드를 작성하고 관리할 수 있으며, 결과적으로 더 나은 품질의 소프트웨어를 만들게 됩니다.