react + typescript 체크박스 컨트롤 예제

Document

• 체크박스 만들기

  • state에 checkbox관련 값 정의

      this.state = {
        setCheckedCnt: 0,
        allChecked: false,
      }
    

  • render에 체크박스 관련 값 추가

      render() {
        ...
        let chkInput
    
        // 전체 체크 박스
        if (!allChecked || setCheckedCnt === 0) {
          chkInput = <input type={'checkbox'} onChange={() => this.handleAllChk()} checked={false} />
        } else {
          chkInput = <input type={'checkbox'} onChange={() => this.handleAllChk()} checked={true} />
        }
    
        return (
          <>
            ...
              {/* item: 반복문의 element 값, rowIdx: number값 */}
              <input
                type={'checkbox'}
                name={`checkbox_row_${item.rowIdx}`}
                checked={item.chk === 1}
                // defaultchecked: 최초 렌더링 시에만 동작함 → checked 속성을 사용해야 이벤트를 줄때 체크박스 동작이 잘 된다.
                // defaultChecked={item.rowChecked}
                onChange={() => handleChk(item.rowIdx)}
              />
    
            ...
          </>
        )
      }
    

  • 체크박스 제어 관련 함수 추가

      // 단일 체크박스 선택
      handleChk = (selectRowIdx: number) => {
        const { list, setCheckedCnt } = this.state
        let retChecked = 0
    
        list.forEach(element => {
          if (element.rowIdx === selectRowIdx) {
            retChecked = element.chk === 1 ? -1 : 1 // 체크된 항목이 체크값 저장
    
            // 체크 -> 미 체크, 미 체크 -> 체크
            element.chk = element.chk === 1 ? 0 : 1
          }
        })
    
        this.setState({
          list,
          // 체크된 항목이 있으면 개수 마이너스 처리
          setCheckedCnt: retChecked === -1 ? setCheckedCnt - 1 : setCheckedCnt + 1,
          allChecked: false,
        })
      }
    
      // 체크박스 전체 선택
      handleAllChk = () => {
        const { list, allChecked, setCheckedCnt } = this.state
    
        let unCheckNum = 0
        let checkNum = 0
        const changeAllChecked = !allChecked ? 1 : 0
    
        list.forEach(element => {
          if (allChecked) {
            unCheckNum = element.chk === 1 ? unCheckNum + 1 : unCheckNum
          } else {
            checkNum = element.chk === 0 ? checkNum + 1 : checkNum
          }
    
          element.chk = changeAllChecked
        })
    
        this.setState({
          list,
          allChecked: !allChecked ? true : false,
          setCheckedCnt: !allChecked ? setCheckedCnt + checkNum : setCheckedCnt - unCheckNum,
        })
      }      
    
      // (추가) 동적 생성을 위한 초기 데이터를 세팅할 때 -> componentDidMount 에서 호출
      getListElement(list) {
        const retRowIndex = list.length
    
        let idx = 1
        list.forEach(element => {
          // 동적 생성일 경우는 listType: 'add' 로 설정
          // listType에 따라서 체크박스에 대한 예외처리를 한다.
          Object.assign(element, { listType: 'list' })
          Object.assign(element, { rowIdx: idx })
    
          idx = idx + 1
        })
    
        this.setState({
          displayList: list,
          rowIndex: retRowIndex,
        })
      }