react Hook 이용해서 항목 선택 & 삭제하기(2)

modal에서 항목을 체크하고 조편성하기 버튼을 누르면 조가 편성이 되는데
row에서 선택된 id들을 제거하고, 제거된 row를 다시 셋팅해줘야한다.

const handleClassCreate = () => {
        if (selectItem.length === 4 || selectItem.length === 5) {
            const result = window.confirm('조를 편성하시겠습니까?');
            if (result) {
                let newStudent = studentList_rows.slice();
                let newTeam = [];

                for (let i = 0; i < selectItem.length; i++) {
                    newStudent.map((data) => {
                        if (data.name === selectItem[i]) {
                            deleteList.push(data);
                            newTeam.push(data)
                        }
                        return data.name !== selectItem[i]
                    })
                }

                setSelectItem([]);

                newClass.createTeam.push(newTeam)

                newClass.createTeam.map((i)=> {
                    return i.map((l)=> {
                        return newStudent = newStudent.filter((item)=> {
                            return item.name !== l.name
                        })
                    })
                })

                setStudentList_rows(newStudent)
            }
        } else {
            alert('4~5명까지 선택 가능합니다.')
        }
    }

조를 편성하고 삭제를 하려고 할때는

 const handleClassDelete = (idx, item) => {
        const deleteItem = newClass.createTeam;

        if (deleteItem.includes(item)) {
            deleteItem.splice(idx, 1)
        }
        
        item.map((data) => {
            return studentList_rows.push(data)
        })
        
        setNewClass({
            createTeam : deleteItem
        })
        setOpenModal(false);
    }

삭제를 하고 난 뒤에 다시 row에 데이터가 추가가 되어야하는데 push를 해주다보니 id 순서에 맞지않게 데이터가 들어가서

 useEffect(()=>{
        setSelectItem([])
        setChecked(false)
        studentList_rows.sort((a,b) => a.id - b.id)
    },[openModal,studentList_rows])

해당 코드를 추가해주었다.

조편성, 삭제 기능을 구현해보았는데 다른 곳에서도 유용하게 사용될 것 같다 :)