[React.js] 리액트의 Delete 기능

기존 작성된 {contextControl}이 mode === 'READ' 상태일 때 보여지는 것으로 만들었기 때문에

contextControl에 Delete 버튼을 추가 작성한다.

 

 

버튼이 setMode를 변경하거나 별도의 컴포넌트 작업 없이 버튼을 생성했다.

버튼을 onClick 하게 되면 선택된 게시글의 id에 해당하는 배열을 제외한 나머지를

새로운 newTopics에 담는다.

그 후 setTopics로 스테이터스를 변경해준다.

 

2번 CSS 버튼을 누른다.

 

id 2번에 해당하는 title과 body가 보여지고 Delete 버튼도 함께 보인다.

Delete 버튼을 누른다.

 

id 2번을 제외한 나머지 배열이 새로운 변수에 담긴 후 새로운 스테이터스를 만든다.

결과적으로 id 2번은 삭제되었다.

기존 1, 2, 3번이 제거되면서 1, 2번으로 정렬된 것을 볼 수 있다.

삭제 후에는 mode를 WELCOME으로 변경하여 페이지가 이동된 것을 볼 수 있다.