React_DELETE

기초의 마지막인 DELETE에 대해 공부해보자.

사실 크게 별거없다. 상세보기에서 delete 버튼을 만들고, 클릭시 상세보기한 topic 제외한 나머지 리스트를 반환해주면 된다.

구조를 크게 생각해보면, 새로운 배열을 만들고, for 문으로 배열 전체를 보며, 다르면 새로운 배열에 추가해준다.

마지막에 새로운 배열을 기존 배열 상태에 넣어주고, 모드를 초기화하면 끝이다.

    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>
      </>
    );

기존 contextControl에 추가를 해줬다.

이때, 변수에는 하나의 태그만 존재할 수 있다. 그래서 빈 태그로 묶고, li태그를 여러개 넣는 형태로 수정하였다.

---

- 후기

 

별 거 없누. 자료조사 하고 회원가입 만들어야징