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 ํ์ ์ผ๋ก ๋ณํ๋์ด ์ ๋ฌ๋๋ฏ๋ก ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์๊ฒ ๋ฉ๋๋ค.