Delete

Delete기능 구현하기

• Create나 Update는 특정 페이지로 이동하기 때문에 a태그를 사용
• 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; i<topics.length; i++){
          if(topics[i].id !== id){
            newTopics.push(topics[i]);
          }
        }
        setTopics(newTopics);
        setMode('WELCOME');
      }}/></li>
    </>

• {contextControl}이라는 변수는 mode가 'READ'일 때 보여지는 UI
• 기존의 li태그가 있고 또 하나의 li를 묶어야 하는데 REACT에서는 하나의 태그 안에 있어야한다.
• 제목이 없는 <></>를 사용하면 복수의 태그를 그루핑하는 용도로만 사용하는 빈태그 (html상으로 존재하지 않는 코드로 사용할 수 있다.)

삭제해야 할 대상은 topics의 데이터

• const newTopics=[]의 빈 배열을 생성한다.
• for문으로 topics.legnth보다 작을 때까지 순회
• topics의 id와 현재 선택된 id값이 일치하지 않는 topics만 push (newTopics.push(topics[i]);)
• newTopics는 기존의 데이터 topics가 아닌 새로운 데이터
• 이 새로운 topics를 setTopics(newTopics)

• delete를 누르면 해당되는 topics삭제
• 이후 setMode('WELCOME')으로 mode값을 바꾼 후 첫 페이지의 UI로 변경시킨다.