Framework/React

[React] Warning: Failed prop type: Invalid prop checked of type string supplied to ..., expected boolean. Warning ๋ฐœ์ƒ ๋ฐ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

yuri lee 2024. 7. 15. 20:41
๋ฐ˜์‘ํ˜•

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 ํƒ€์ž…์œผ๋กœ ๋ณ€ํ™˜๋˜์–ด ์ „๋‹ฌ๋˜๋ฏ€๋กœ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•