Check
input 의 type='checkbox' 를 래핑한 컴포넌트입니다.
기본적인 사용은 checked 값을 form data 에 연결하는 것입니다. 이때 값은 boolean 으로만 처리됩니다.
export function CheckBasic(){
const [data, setData] = useState({
aaa:false,
bbb:[],
})
return <Frame>
<div>data.aaa = {String(data.aaa)}</div>
<div>data.bbb = {JSON.stringify(data.bbb)}</div>
<div>---------------------</div>
<Form formId="my-form" data={data} setData={setData}>
<Flex rowDirection flexGap="10px">
<Flex>
<span>
aaa checked <Check targetId='aaa'/>
</span>
</Flex>
<Flex>
<div>
bbb multi check
</div>
<div>
1:<Check targetId='bbb' value={1}/>
2:<Check targetId='bbb' value={2}/>
3:<Check targetId='bbb' value={3}/>
</div>
</Flex>
</Flex>
</Form>
</Frame>
}
속성 설명
targetId
targetId = keyof T
Form 에 바인딩된 T 타입에 대한 속성을 targetId 에 지정합니다. 해당 속성과 input 이 바인딩됩니다.
value
value = CheckValue = string | number
일반적인 checkbox 와는 다른 멀티값 바인딩을 위한 속성입니다.
가장 위의 예시에서 볼수 있듯이 value 를 설정하고, targetId 의 타입이 배열인 경우 체크했을때 해당 value 값이 배열에 들어갑니다. (체크해제하면 다시 빠지는 토글기능)
const [data, setData] = useState({
bbb:[], // bbb 는 배열
})
...
<Check targetId='bbb' value={1}/> // 값 1을 토글
<Check targetId='bbb' value={2}/> // 값 2을 토글
<Check targetId='bbb' value={3}/> // 값 3을 토글