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

react Hook을 이용해서 그룹을 만들고 만들어진 그룹을 삭제하는 기능을 구현해봤다.
배열 내장 함수의 사용이 익숙치 않아서 이번 기능구현을 통해 filter, map, push 등 자주 쓰이는 내장함수를 마스터 해보고 싶다.

내학생 리스트 버튼을 누르면 우측 modal이 열리고, 학생들을 선택한 뒤 조편성하기 버튼을 누르면 좌측 테이블에 선택한 학생들의 이름이 나타난다.

const [studentList_rows, setStudentList_rows] = useState([
        {   
            id: 1,
            'name': 'name0',
            'userid': 'id_00',
            'class': '2/9',
            'select': ''
        },
        {
            id: 2,
            'name': 'name1',
            'userid': 'id_01',
            'class': '2/9',
            'select': ''
        },
        {
            id: 3,
            'name': 'name2',
            'userid': 'id_03',
            'class': '2/9',
            'select': ''
        },
        {
            id: 4,
            'name': 'name3',
            'userid': 'id_04',
            'class': '2/9',
            'select': ''
        },
        {
            id: 5,
            'name': 'name4',
            'userid': 'id_05',
            'class': '2/9',
            'select': ''
        },
        {
            id: 6,
            'name': 'name5',
            'userid': 'id_06',
            'class': '2/9',
            'select': ''
        },
        {
            id: 7,
            'name': 'name6',
            'userid': 'id_07',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 8,
            'name': 'name7',
            'userid': 'id_08',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 9,
            'name': 'name8',
            'userid': 'id_09',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 10,
            'name': 'name9',
            'userid': 'id_10',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 11,
            'name': 'name10',
            'userid': 'id_11',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 12,
            'name': 'name11',
            'userid': 'id_12',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 13,
            'name': 'name12',
            'userid': 'id_13',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 14,
            'name': 'name13',
            'userid': 'id_14',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 15,
            'name': 'name14',
            'userid': 'id_15',
            'class': '2/9',
            'select': ''
        }, 
        {
            id: 16,
            'name': 'name15',
            'userid': 'id_16',
            'class': '2/9',
            'select': ''
        }
    ])

modal data에 들어가는 목록 데이터를 JSON 구조로 만들어봤다.
useState를 사용한 이유는, 목록에서 체크된 항목을 제거할 때,
데이터의 update가 이루어져야한다고 생각했기 때문이다.

선택된 학생들은 조편성 테이블 우측에 생성된다.

const [newClass, setNewClass] = useState({
            createTeam: [
                [
                    {   
                        id: 1,
                        'name': 'name0',
                        'userid': 'id_00',
                        'class': '2/9',
                        'select': ''
                    },
                    {
                        id: 2,
                        'name': 'name1',
                        'userid': 'id_01',
                        'class': '2/9',
                        'select': ''
                    },
                    {
                        id: 3,
                        'name': 'name2',
                        'userid': 'id_03',
                        'class': '2/9',
                        'select': ''
                    },
                    {
                        id: 4,
                        'name': 'name3',
                        'userid': 'id_04',
                        'class': '2/9',
                        'select': ''
                    },
                ],
                [
                    {
                        id: 5,
                        'name': 'name4',
                        'userid': 'id_05',
                        'class': '2/9',
                        'select': ''
                    },
                    {
                        id: 6,
                        'name': 'name5',
                        'userid': 'id_06',
                        'class': '2/9',
                        'select': ''
                    },
                    {
                        id: 7,
                        'name': 'name6',
                        'userid': 'id_07',
                        'class': '2/9',
                        'select': ''
                    }, 
                    {
                        id: 8,
                        'name': 'name7',
                        'userid': 'id_08',
                        'class': '2/9',
                        'select': ''
                    }, 
                ],
            ]
        });

조가 편성되면 데이터 구조는 이렇게 바뀔 것이다.

studentList_rows에 있는 항목들 중에, newClass.createTeam에 있는 항목들을 제외하고 modal 창에 데이터를 뿌려주기위해서

	useEffect(() => {
            handleFilter()
        },[])
    
        const handleFilter = () => {
            let newStudent = studentList_rows.slice();

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

함수를 만들고, useEffect 안에서 실행시켜주었다.

체크박스 선택했을 때, modal에서 해당 이름빠지기, 조편성하기는 다음 게시물에서 설명할 예정이다.