🔥 Trouble Shooting - React Key Props 트러블 슈팅

🚨 문제 상황

React 컴포넌트에서 key prop을 직접 접근하려 할 때 다음과 같은 경고가 발생했습니다:

Warning: MedalInputFormRow: `key` is not a prop. Trying to access it will result in `undefined` being returned.

💻 문제 발생 코드

const MedalInputFormRow = ({ children, key, value }) => {
  return (
    <tr key={key} className="tableRow">
      // ... 컴포넌트 내용
    </tr>
  );
};

// 사용부
<MedalInputFormRow key={nation.id} value={nation}>

🤔 원인 분석

1. React에서 key는 특수 prop으로 처리됨
2. 컴포넌트 내부에서 직접 접근 불가
3. React의 내부 재조정(reconciliation) 과정에서만 사용

✅ 해결 방법

// 컴포넌트 정의
const MedalInputFormRow = ({ children, id, value }) => {
  return (
    <tr className="tableRow">
      // ... 컴포넌트 내용
    </tr>
  );
};

// 사용부
<MedalInputFormRow 
  key={nation.id} 
  id={nation.id} 
  value={nation}
>

🎯 해결 포인트

1. key 대신 id prop 사용
2. 동일한 값을 다른 이름으로 전달
3. PropTypes 업데이트

📝 배운 점

• React의 특수 props 개념 이해
• key prop의 올바른 사용법
• 컴포넌트 props 설계 방법

🔄 개선된 점

1. 경고 메시지 해결
2. 올바른 React 패턴 적용
3. 코드 안정성 향상

💡 추가 TIP

// PropTypes 정의 예시
MedalInputFormRow.propTypes = {
  children: PropTypes.node,
  id: PropTypes.string.isRequired,  // key 대신 id 사용
  value: PropTypes.object.isRequired
};

#React #TroubleShooting #KeyProps #Development #FrontEnd