[React] - TypeScript : Record 유틸리티 타입

유틸리티 타입은 TypeScript에서 제공하는 내장 타입 중 하나로, 기본 타입들을 조합하여 새로운 타입을 만들 때 사용됩니다.

유틸리티 타입(Utility Types)

유틸리티 타입은 기본 타입을 변환하거나 다른 타입으로 변환할 때 사용됩니다. 주요 유틸리티 타입에는 다음과 같은 것들이 있습니다!

• Partial<Type>: 모든 속성이 선택적인 타입을 생성합니다.
• Required<Type>: 모든 속성이 필수인 타입을 생성합니다.
• Readonly<Type>: 모든 속성이 읽기 전용인 타입을 생성합니다.
• Record<KeyType, ValueType>: 키와 값의 타입을 가진 맵을 생성합니다.
• Pick<Type, Keys>: 지정된 키만을 가진 타입을 생성합니다.
• Omit<Type, Keys>: 지정된 키를 제외한 타입을 생성합니다.
• Exclude<Type, ExcludedUnion>: 유니온 타입에서 특정 타입을 제외한 타입을 생성합니다.
• Extract<Type, Union>: 유니온 타입에서 특정 타입을 추출한 타입을 생성합니다.
• NonNullable<Type>: null 또는 undefined를 제외한 타입을 생성합니다.
• ReturnType<Type>: 함수의 반환 타입을 가져옵니다.
• Parameters<Type>: 함수의 매개변수 타입들의 유니온을 가져옵니다.

오늘은 스프린트3 FE 코드를 뜯어보다가 처음 보는 타입이 있길래 ㅎㅎ 포스팅 해 보려고 합니다.

 

Record 타입이란?

앞서 말했듯 Record는 `객체`의 속성을 정의할 때 사용됩니다!

type MyRecord = Record<keyType, ValueType>;

 

 

style/theme.ts

interface Theme {
  name: ThemeName;
  color: Record<ColorKey, string>;
  heading: {
    [key in HeadingSize]: {
      fontSize: string;
    };
  };
  // 이하 생략
}

위 코드에서 `color` 속성은 `ColorKey` 타입의 키와 문자열 값을 가지는 맵을 나타냅니다.

>> 이를 통해 특정 색상에 대한 값을 쉽게 참조할 수 있게 됩니다 ( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾

 

style/theme.ts

export const light: Theme = {
  name: "light",
  color: {
    primary: "#ff5800",
    background: "lightgrey",
    secondary: "#5f5f5f",
    third: "green",
    border: "grey",
    text: "black",
  },

위 타입 정의에서 Record<ColorKey, string>는 ColorKey 타입의 키와 문자열 값을 가지는 맵을 의미합니다.

따라서 color 속성은 다양한 색상 이름(key)에 해당하는 HEX 코드(value)로 구성된 맵을 표현하고 있습니다.