[생활코딩/React] 2022개정판 | 10. delete

참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 

1.  리스트를 삭제해보자!

---

delete 기능을 만들어보자

---

function App() {
  ...중략...
  
  if (mode === "WELCOME") {...}
  else if (mode === "READ") {
    ...중략...
    
    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");
    }}></input></li>
    </>
  } else if (mode === "CREATE") {...}
  else if (mode === "UPDATE") {...}


  return (...);
}

export default App;

👉🏻delete는 a tag가 아닌 input tag로 만들어준다.

• for문을 돌려서 클릭한 리스트가 아닌 것들만 newTopics 리스트에 넣어준다.
• newTopic로 세팅하고 mode를 WELCOME으로 세팅한다.

css 리스트가 있었는데요, 없어졌어요.