[React] Warning: Failed prop type: Invalid prop checked of type string supplied to ..., expected boolean. Warning 발생 및 해결 방법

Intro

안녕하세요. react 사용 중 다음의 에러가 발생하였습니다. 

Warning: Failed prop type: Invalid prop checked of type string supplied to ..., expected boolean. 

 

Why?

const MemoizedCheckbox: React.FC<CheckboxProps & { value?: any }> = React.memo(({ checked, onChange, value }) => {
  return <Checkbox checked={checked} onChange={onChange} value={value} />
})

...

<StyledTableCell align='center' key={headerIndex}>
  <FormControlLabel
    control={
      <MemoizedCheckbox checked={row['checked'] ?? ''} value={data} onChange={} />
    }
    label={data}
    labelPlacement='end'
  />
</StyledTableCell>

 

오류의 원인은 MemoizedCheckbox 컴포넌트의 checked prop에 문자열 타입이 전달되었기 때문입니다. checked prop은 boolean 타입을 기대하고 있으며, 문자열이 전달되면 prop 타입 검사가 실패하여 오류가 발생합니다. row['checked'] ?? '' 부분에서 문제가 발생하고 있습니다. 이 표현식은 row['checked']가 존재하지 않을 경우 빈 문자열을 반환합니다. 이는 Checkbox 컴포넌트에 전달될 때 타입 오류를 발생시킵니다.

How to solve the problem

checked prop에 boolean 타입만 전달되도록 수정해야 합니다.

<MemoizedCheckbox 
  checked={!!row['checked']}  // !! 연산자를 사용하여 boolean 타입으로 변환
  value={data} 
  onChange={} 
/>

 

이렇게 수정하면 checked prop이 boolean 타입으로 변환되어 전달되므로 오류가 발생하지 않게 됩니다.