⚛️React : section10 - Delete

마지막으로 우리는 Delete를 구현할 것이다. 그러기 위해서는 기존에 update부분에서 delete를 추가할 것이다. 이전에는 a태그를 사용했지만 이번에는 우리가 페이지를 새로 생성하거나 불러오는 것이 아니기때문에 input태그로 버튼을 구현 할 것이다. 따라서 contextControl변수에서 값을 수정하면 된다. 아래 코드를 살펴보자.

 

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; i < topics.length; i++) {

          if (topics[i].id !== id) {

            newTopics.push(topics[i])

          }

        }

        setTopics(newTopics);

        setMode('WELCOME')

      }} /></li>

    </>

<></>이 태그는 비어 있는 태그이지만 update와 delete태그들을 묶어주기 위함이다. 이에 따라서 onClick함수를 보면 newTopics는 비어있는 배열값을 정의하고 newTopics를 if를 통해서 setId가 선택 되어 있는 id를 뺀 나머지 값들을 newTopics배열에 push로 넣어두고 이를 다시 setTopics로 새로 정의하는 것이다. 예를 들어 css를 지운다면 js와 html만 있는 것이다.

Delete는 update에 비해서 매우 쉽다. 이 수업에서 가장 중요한건 Nav를 통해 useState를 활용한 부분이다. 만약 수업에 이해가 잘 가지 않는 다면 useState의 수업을 다시 듣기를 추천한다.