리액트에서 전체 선택·해제 체크박스를 만들고 세부 체크박스가 전체 체크박스를 따라가게 만들고 있습니다. for in 문으로 안 되는데, for문으로는 됩니다. 왜이럴까요?

import React, {Component} from 'react'
import axios from 'axios'

class SETTING extends Component{

    componentDidMount(){
        axios.get('/setting')
        .then((res)=>{
            for(var i in res.data.results){

                var check = document.createElement('input')
                check.setAttribute('type', 'checkbox')
                check.setAttribute('class', 'check')
                check.setAttribute('value', res.data.results[i].num)
                check.setAttribute('name', res.data.results[i].name)

                var li = document.createElement('li')
                var text = document.createTextNode(res.data.results[i].name)
                li.appendChild(check)
                li.appendChild(text)

                var ul = document.querySelector('#list')
                ul.appendChild(li)
            }
        })
    }

    render(){
        return(
            <div>
                <ul></ul>

                <input type='checkbox' id='allcheck' onClick={()=>{
                    var allCheck = document.querySelector('#allcheck')
                    var checkArr = document.querySelectorAll('.check')


                    for(var i=0; i<checkArr.length; i++){
                        checkArr[i].checked=allCheck.checked
                    }
                    // for(var i in checkArr){
                    //  checkArr[i].checked=allCheck.checked
                    // } //이 부분이 왜 안 되는지 모르겠습니다.
                }}>
                </input>

                <ul id='list'></ul>

            </div>
        )
    }
}