🔥 Trouble Shooting - React PropTypes 정의 시 에러 발생!

🚨 문제 상황

React 컴포넌트에서 PropTypes 정의 시 다음과 같은 에러가 발생했습니다:

PokemonCard.jsx:79 Uncaught TypeError: Cannot read properties of undefined (reading 'isRequired')

💻 문제 발생 코드

// 잘못된 PropTypes 정의
PokemonCard.propTypes = {
  pokemon: PropTypes.Array.isRequired
}

🤔 원인 분석

1. PropTypes 정의가 잘못됨
2. array가 아닌 Array로 작성됨 (PropTypes의 올바른 메서드 사용 X)
3. 객체 구조를 정확히 반영하지 않음

✅ 해결 방법

// 올바른 PropTypes 정의
PokemonCard.propTypes = {
  pokemon: PropTypes.shape({
    img_url: PropTypes.string,
    korean_name: PropTypes.string,
    types: PropTypes.array,
    id: PropTypes.number,
    description: PropTypes.string
  })
}

🎯 해결 포인트

1. PropTypes.Array 대신 PropTypes.shape 사용
2. 객체의 각 속성에 대한 타입 명시
3. 필수값이 아닌 경우 isRequired 제거

📝 배운 점

• PropTypes의 올바른 사용법
• 객체 구조를 정의하는 방법
• React 컴포넌트의 타입 체크 중요성

🔄 개선된 점

1. 타입 에러 해결
2. 명확한 props 구조 정의
3. 컴포넌트 안정성 향상

💡 추가 TIP

// 배열 타입을 정의할 때는 이렇게!
types: PropTypes.arrayOf(PropTypes.string)

// 필수값으로 지정하고 싶다면
pokemon: PropTypes.shape({
  // ...props
}).isRequired