9. Delete

https://www.youtube.com/watch?v=OZPRKFqPWG4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=10 

이제 C R U D의 마지막 D. Delete 차례다.

 

Delete는 링크로 구성하면 안되므로 button으로 구현을 한다.

contextControl = <>
      <li><a href={'/update/'+id} onClick={event=>{
        event.preventDefault();
        setMode('UPDATE');
      }}>Update</a></li>
      <li><input type='button' value='Delete' onClick={()=>{
        const newTopics = []
        for(let i=0; topics.length; i++) {
          if(topics[i].id !== id){
            newTopics.push(topics[i]);
          }
        }
        setTopics(newTopics);
        setMode('WELCOME');
      }} /></li>
    </>

조건문 READ 부분에 빈 태그로 그룹화 해주고 새로 li 태그를 통해 Delete 버튼을 만들어준다.

클릭이 발생했을 때, 반복문을 돌면서 선택한 값의 id와 다른 값을 새로운 리스트에 추가해준 다음 setTopics를 통해서 값을 변경해주면 끝이다.