AI 요약관련 정보

• useState와 같은 React 훅은 조건문 내에서 호출할 수 없으며, 이는 훅 규칙 위반으로 이어집니다. 🚫
• 훅에는 두 가지 황금률이 있습니다: 첫째, 함수 본문의 최상위 레벨에서만 호출해야 합니다 (반복문, 조건문, 중첩 함수, try-catch 블록 내부 금지). ⬆️
• 둘째, 훅은 React 컴포넌트 또는 커스텀 훅과 같은 React 함수 내에서만 호출해야 합니다. ⚛️
• "최상위 레벨"은 if 문이나 반복문, 조기 반환 이전에 함수 본문에 직접 훅을 선언하는 것을 의미합니다. 🔝
• React는 훅을 호출 순서(내부 슬롯)로 추적하므로, 조건부 호출로 인해 순서가 변경되면 상태 추적에 혼란이 발생합니다. 🔄
• 흔한 규칙 위반 사례로는 목록 요소별 상태 생성, 조기 반환 뒤 훅 배치, 이벤트 핸들러 내 훅 호출 등이 있습니다. ⚠️
• eslint-plugin-react-hooks 플러그인은 이러한 규칙 위반을 자동으로 감지하여 개발자가 실수를 방지하도록 돕습니다. 🛠️
• 이러한 규칙은 React가 렌더링 간 상태를 예측 가능하게 추적하고, 성능을 최적화하며, 명확한 오류 메시지를 제공하기 위해 필수적입니다. 💡