React Delete

서론

2024.12.28 - [Web framework/React] - React Update

React Update

이전 글에서는 Update에 대해서 학습하고 실습한 내용을 정리하였습니다. 이번 글에서는 CRUD의 D 그러니까 Delete 부분을 학습하고 실습한 내용을 정리하고자 합니다.

 

Delete 실습하기

conetextControl = <><li><a href={'/update' + id} onClick={(event)=>{
    event.preventDefault();
    setMode('UPDATE');
    }}>Update</a></li>
    <li><input type="button" value="delete" onClick={()=>{
        const newLis = []
        for(let i = 0; i < lis.length; i++) {
            if(lis[i].id !== id) {
                newLis.push(lis[i]);
            }
        }
        setLis(newLis);
    }}/></li>
</>

<> </> 태그는 아무런 태그도 아니기 때문에 li 태그를 묶는데 적절하기 때문에 사용해서 li 태그들을 묶어줍니다.

 

삭제하기 위해서는 새 배열을 만든 다음에 기존의 배열을 반복합니다. 그리고 나서 현재 선택된 배열의 id를 찾아서 해당 값을 제외한 나머지 값을 새로운 배열에 저장해줍니다. 저장된 배열을 setLis로 전달하면 데이터가 삭제 됩니다.