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에서 해당 이름빠지기, 조편성하기는 다음 게시물에서 설명할 예정이다.
Author And Source
이 문제에 관하여(react Hook 이용해서 항목 선택 & 삭제하기(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yerim1935/react-Hook-이용해서-항목-선택-삭제하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)