🔥 Trouble Shooting - React PropTypes

🚨 문제 상황

React 컴포넌트에서 props를 사용할 때 다음과 같은 에러가 발생했습니다:

Error: 'handleSubmit' is missing in props validation

💻 문제 발생 코드

// As-is
const MedalInputForm = ({ handleSubmit, children }) => {
  return (
    // 컴포넌트 내용
  );
};

🤔 원인 분석

1. React에서는 props의 타입을 명시적으로 검증하는 것을 권장
2. PropTypes를 정의하지 않으면 개발 모드에서 경고 발생
3. 컴포넌트의 안정성과 유지보수성 저하 우려

✅ 해결 방법

// To-be
import PropTypes from 'prop-types';

const MedalInputForm = ({ handleSubmit, children }) => {
  return (
    // 컴포넌트 내용
  );
};

MedalInputForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
};

export default MedalInputForm;

🎯 해결 포인트

1. PropTypes 패키지 import
2. 컴포넌트의 propTypes 정의
3. 각 prop의 타입과 필수 여부 지정

📝 배운 점

• React에서 PropTypes의 중요성
• 타입 체크를 통한 버그 예방
• 컴포넌트 문서화 효과

🔄 개선된 점

1. 타입 안정성 확보
2. 개발 시 props 오류 즉시 발견 가능
3. 컴포넌트 인터페이스 명확화

💡 추가 TIP

// 자주 사용되는 PropTypes 예시
ComponentName.propTypes = {
  string: PropTypes.string,
  number: PropTypes.number,
  function: PropTypes.func,
  array: PropTypes.array,
  object: PropTypes.object,
  node: PropTypes.node,
  element: PropTypes.element,
};