[TIL] input undefined to a defined value error

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

input에 정의되지 않은 값이 들어가게 되면서 발생되는 error 

//변경 전 
const isAllCheck =
    prodList && prodList.length > 0 && checkedItems.length === prodList.length
//변경 후 
const isAllCheck =
    prodList ? prodList.length > 0 && checkedItems.length === prodList.length : false
    
    
<input
    type="checkbox"
    value={0}
    checked={isAllCheck}
    onChange={(e) =>
      changeHandler(e.target.checked, Number(e.target.value))
    }
  />

 

하단 테이블 데이터의 모든 항목이 선택되었는지 를 판별해야 했으며  모든 table item 이 선택 됐을 때 체크박스가 활성되어야 했으며  데이블 개수와 체크된 item 들을 확인하는 코드에서  props로 받아온 prodList의 데이터  undefined일 경우 checked 상태가 없기 때문에 발생되는 문제였다  삼항 연산자를 통해 prodList 데이터가 undefined일 때 flase 처리로 해결