Props타입 정의란,

💡 Props(프롭스)는 컴포넌트에 전달하는 값(데이터)을 의미해.
즉, 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용하는 것!

🔍 1️⃣ Props 타입 정의란?

📌 Props 타입 정의를 하는 이유

코드를 더 명확하게 작성할 수 있음 (어떤 값이 들어와야 하는지 예측 가능)
잘못된 데이터가 전달되는 걸 방지할 수 있음 (예: 숫자여야 하는데 문자열이 들어오는 경우 방지)
예제: Props 타입을 정의하지 않은 경우

const Button = (props) => {
  return <button>{props.label}</button>;
};

export default Button;

🚨 문제점:

props.label이 문자열일지, 숫자일지, 객체일지 명확하지 않음
label이 필수인지, 선택인지 불분명

🔍 2️⃣ Props 타입을 정의하는 방법

✅ TypeScript에서는 interface 또는 type을 사용해 Props의 타입을 정의할 수 있어!

📌 interface를 사용한 Props 타입 정의

interface ButtonProps {
  label: string; // ✅ label은 문자열이어야 함
  onClick: () => void; // ✅ onClick은 함수여야 함
}

이제 위에서 만든 Button 컴포넌트에 적용해보자!

const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

✅ 이렇게 하면, label이 string이어야 하고, onClick이 함수여야 함을 보장할 수 있어!
💡 이제 onClick에 숫자를 넣거나 label을 number로 설정하면 TypeScript가 오류를 잡아줌.

🔍 3️⃣ BottomSheetProps 이해하기

아까 본 BottomSheet.tsx에서도 Props 타입을 정의했었지? 다시 보면서 이해해보자!

interface ButtomSheetProps {
  onClose: () => void;  // ✅ 모달을 닫는 함수 (반환값 없음)
  options: {            // ✅ 버튼 목록 (배열)
    title: string;      // 버튼에 표시될 텍스트
    onClick: () => void; // 버튼을 클릭했을 때 실행할 함수
    type?: string;      // (선택적) 버튼 스타일 ('primary', 'danger' 등)
  }[];
}

✅ BottomSheetProps를 사용한 컴포넌트

const ButtomSheet = ({ onClose, options }: ButtomSheetProps) => {
  return (
    <div>
      <button onClick={onClose}>닫기</button>
      {options.map((option, index) => (
        <button key={index} onClick={option.onClick}>
          {option.title}
        </button>
      ))}
    </div>
  );
};

🚀 이제 onClose는 반드시 함수여야 하고, options는 배열 형태의 데이터여야 함을 보장할 수 있어!

📌 최종 정리

개념	설명
Props	컴포넌트에 전달하는 값
Props 타입 정의	Props가 어떤 형태인지 지정하는 것 (string, number, function 등)
interface 사용	객체 형태의 Props 타입을 정의할 때 주로 사용
타입을 정의하는 이유	코드의 안정성 증가 + 오류 방지