타입스크립트, 타입어노테이션, 제네릭타입

Interface MemberDeleteModalProps { meetupId: MyMeetupItem['id']; // MyMeetupItem의 id 타입만 사용 } 이부분을 아예 안 쓰고 직접 MyMeetupItem['id']로 타입을 지정해주면 안 돼? 새로 interface MemberDeleteModalProps 선언을 하는 게 낭비같아서

네, 충분히 가능합니다! 중간 인터페이스 선언 없이 직접 컴포넌트 props에 타입을 지정할 수 있습니다. 더 간결한 코드를 위해 다음과 같이 작성할 수 있습니다:

MyMeetupMembers 컴포넌트
tsx
import { MyMeetupItem } from "@/types/mySpaceType";

const MyMeetupMembers: React.FC<{ meetupId: MyMeetupItem['id'] }> = ({ meetupId }) => {
  // 컴포넌트 내용...
};

MemberDeleteModal 컴포넌트
tsx
import { MyMeetupItem } from "@/types/mySpaceType";

const MemberDeleteModal: React.FC<{ meetupId: MyMeetupItem['id'] }> = ({ meetupId }) => {
  // 컴포넌트 내용...
};

OutButton 컴포넌트 (필요한 경우)
tsx
import { MyMeetupItem } from "@/types/mySpaceType";

const OutButton: React.FC<{ 
  meetupId: MyMeetupItem['id']; 
  isOrganizer: MyMeetupItem['is_organizer'] 
}> = ({ meetupId, isOrganizer }) => {
  // 컴포넌트 내용...
};

이 방식은 인터페이스 선언을 줄여 코드를 더 간결하게 만들며, 특히 props가 간단한 경우 매우 효과적입니다. 타입 안전성은 여전히 유지됩니다.

---

: React.FC<{ meetupId: MyMeetupItem['id'] }> 이 부분의 문법을 한글자 한글자 설명해줘

: React.FC<{ meetupId: MyMeetupItem['id'] }>

• : - 타입 애너테이션(type annotation)을 시작하는 기호입니다. 변수나 상수, 함수의 타입을 지정할 때 사용합니다.

• React.FC - "React Function Component"의 약자로, React 함수형 컴포넌트의 타입을 나타냅니다. React 네임스페이스에서 제공하는 제네릭 타입입니다.

• < - 제네릭 타입의 시작을 나타내는 기호입니다. 제네릭은 타입에 매개변수를 사용할 수 있게 합니다.

• { - 객체 타입 리터럴의 시작을 나타냅니다. 이 객체는 컴포넌트가 받을 props의 타입을 정의합니다.

• meetupId - props 객체 내의 속성 이름입니다. 이 컴포넌트가 meetupId라는 이름의 prop을 받을 것임을 나타냅니다.

• : - 객체 속성의 타입을 지정하는 기호입니다.

• MyMeetupItem - 가져온(import) 타입 인터페이스의 이름입니다.

• ['id'] - 인덱스 접근 타입(indexed access type)이라고 불리며, MyMeetupItem 인터페이스에서 id 속성의 타입만 추출합니다. 예를 들어 MyMeetupItem의 id가 number 타입이라면, MyMeetupItem['id']는 number 타입을 나타냅니다.

• } - 객체 타입 리터럴의 끝을 나타냅니다.

• • 제네릭 타입의 끝을 나타내는 기호입니다.
    결론적으로, 이 전체 표현은 "이 변수/상수는 meetupId라는 이름의 속성을 props로 받는 React 함수형 컴포넌트이며, 그 속성의 타입은 MyMeetupItem 인터페이스의 id 속성과 동일한 타입이다"라는 의미입니다.

---

const MemberDeleteModal: 의 리턴값이 React.FC라는 건가?

정확히 그렇습니다. 타입스크립트 표기법 const MemberDeleteModal: React.FC<...>에서

const MemberDeleteModal은 상수를 선언하고 있습니다.
: 다음에 오는 React.FC<...>는 이 상수의 타입을 지정합니다.
즉, MemberDeleteModal은 React 함수형 컴포넌트(React.FC)이며, 타입스크립트는 이 변수가 함수형 컴포넌트임을 인식합니다.
React.FC는 React 함수형 컴포넌트를 위한 타입 정의로, 다음과 같은 특징이 있습니다.

• 컴포넌트 함수의 반환 타입을 ReactElement 또는 null로 정의합니다.
• 암시적으로 children prop을 포함합니다.
• 제네릭을 사용해 props의 타입을 지정할 수 있습니다.
• 따라서 MemberDeleteModal은 React.FC 타입의 함수형 컴포넌트이고, JSX를 반환하는 함수라고 볼 수 있습니다.

일반적인 함수 선언과 비교하면:

tsx
// React.FC 사용
const MyComponent: React.FC<{ name: string }> = ({ name }) => {
  return <div>Hello, {name}</div>;
};


// 일반 함수 선언
function MyComponent({ name }: { name: string }) {
  return <div>Hello, {name}</div>;
}

두 방식 모두 유효하지만, React.FC를 사용하면 명시적으로 이것이 React 컴포넌트임을 나타낼 수 있습니다.