[React.js] 초보자도 쉽게 따라하는 checkbox defualt로 체크 하기

안녕하세요. 리엑트 하다가 checkbox 사용 예시는 많은데, 기존에 데이터를 미리 디폴트로 체크 해놓아햐 하는 경우가 발생 합니다.

일단 체크박스 생성을 합니다

<input type="checkbox" />

그 다음 해당 input에 해당 value값을 넣어 줍니다 예를 들어, 우리는 기존의 List 배열과 , 체크된 리스트를 갖고있을 checkList 배열을 선언해 줍니다

const [list, setList] = usestate(['a','b','c','d']);
const [checkedList, setCheckedList] = useState([]);

위 체크 박스를 반복문으로 돌려서 체크박스를 생성 해 줍니다

list.map((item) => {
	return(
    	<inpute type="checkbox" value={item} />
        )
      } );

이렇게 생성해주면 value값은 어디에도 나타나지않고 hidden형태로 value를 갖고있습니다.

여기서 우리가 defualt로 'a'를 체크해 준다고 가정합니다.

setCheckedList(['a']);

라고 처음에 들어갔다고 가정하면, 디폴트로 체크되기 위해서

list.map((item) => {
	return(
    	<inpute type="checkbox" value={item} defualtChecked={checkList.includes(item) ? true : false}  />
        )
      } );

defualtChecked={checkList.includes(item) ? true : false}

이렇게 checkedList 배열에서 list의 각 원소인 item을 포함시키는지 안하는지로 구분 가능합니다.

보통 defualt라고 표현하는데 리엑트에서는 checkbox를 표현하려면 defualtChecked로 표현해야 하더라구요]

 

이상 초보자도 쉽게 따라하는 checkbox defualt로 체크 하기 였습니다.