본문으로 건너뛰기

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을 토글