PropsWithChildren을 사용하지만 정확히 어떤 건지 알지 못해서

자세히 알아보고자 정리해본다!!

우선, PropsWithChildren은 타입 유틸리티라고 한다.

타입 유틸리티는 TypeScript에서 제공하는 "타입을 다루는 도구들"이라고 생각하시면 됩니다.

기존 타입을 변형하거나 새로운 타입을 만들 때 사용하는 헬퍼 같은 것입니다.

타입 유틸리티에는 여러가지가 있다.

1. Partial - 모든 속성을 선택적(optional)으로 만듦

// 원래 타입
type User = {
  name: string;    // 필수
  age: number;     // 필수
}

// Partial 적용
type OptionalUser = Partial<User>
// 결과:
// {
//   name?: string;  // 선택적
//   age?: number;   // 선택적
// }

1. Required - 모든 속성을 필수로 만듦

type User = {
  name?: string;   // 선택적
  age?: number;    // 선택적
}

type RequiredUser = Required<User>
// 결과:
// {
//   name: string;   // 필수
//   age: number;    // 필수
// }

1. Pick - 특정 속성만 선택

type User = {
  name: string;
  age: number;
  email: string;
}

type NameOnly = Pick<User, 'name'>
// 결과:
// {
//   name: string;
// }

1. Omit - 특정 속성을 제외

type User = {
  name: string;
  age: number;
  email: string;
}

type UserWithoutEmail = Omit<User, 'email'>
// 결과:
// {
//   name: string;
//   age: number;
// }

앞서 본 PropsWithChildren도 타입 유틸리티의 한 종류입니다. children이라는 속성을 자동으로 추가해주는 도구죠:

// 이렇게 직접 작성하는 대신
type Props = {
  title: string;
  children: React.ReactNode; // 이걸 자동으로 포함시켜주는게
}

// 타입 유틸리티를 사용하면 더 간단해집니다
type Props = PropsWithChildren<{
  title: string;
}>