[React] Delete

💡 Delete

# Delete 버튼 만들기

• ' <> </> ' 제목이 없는 태그를 쓰면 복수의 태그를 그룹으로 묵는 빈 태그

} else if (mode === 'READ') {
    let title, body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
    contextControl = <>  // 📍 태그를 묶어주는 빈태그
      <li><a href={'/update/'+id} onClick={(event) => {
      event.preventDefault(); 
      setMode('UPDATE');
      }}>Update</a></li>
       // 📍 Delete 버튼
      <li><input type="button" value="Delete"></input></li>
    </>

# Delete 작동

} else if (mode === 'READ') {
    let title, body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
    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);
      }}></input></li>
    </>

else if (mode === 'READ') {
    let title, body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
    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>
    </>

# 완성 👏🏻

import './App.css';
import {useState} from 'react';

function Header (props) {
  console.log('props', props, props.title);
  return (
  <header>
    <h1><a href="/" onClick={(event) => {
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
  )
}
function Nav (props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>  
        <a href={'/read/'+t.id} onClick={(event) => {
          event.preventDefault();
          props.onChangeMode(Number(t.id));
        }}>{t.title}</a>
      </li>
    )
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  )
}
function Article (props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  )
}
function Create (props) {
  return (
    <article>
      <h2>Create</h2>
      <form onSubmit={(event) => {  
        event.preventDefault();  
        const title = event.target.title.value; 
        const body = event.target.body.value;  
        props.onCreate(title, body);
      }}>
        <p><input type="text" name="title" placeholder="title"></input></p>
        <p><textarea name="body" placeholder='body'></textarea></p>
        <input type="submit" value="Create"></input>
      </form>
    </article>
  )
}
function Update(props) {
  const [title, setTitle] = useState(props.title);
  const [body, setBody] = useState(props.body);
  return (
    <article>
      <h2>Update</h2>
      <form onSubmit={(event) => {  
        event.preventDefault();  
        const title = event.target.title.value; 
        const body = event.target.body.value;  
        props.onUpdate(title, body);
      }}>
        <p><input type="text" name="title" placeholder="title" value={title} onChange={(event) => {
          setTitle(event.target.value); 
        }}></input></p>
        <p><textarea name="body" placeholder='body' value={body} onChange={(event) => {
          setBody(event.target.value); 
        }}></textarea></p>
        <input type="submit" value="Update"></input>
      </form>
    </article>
  )
}
function App() {
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4); 
  const [topics, setTopics] = useState([ 
    {id: 1, title: 'HTML', body: 'HTML is ...'},
    {id: 2, title: 'CSS', body: 'CSS is ...'},
    {id: 3, title: 'JavaScript', body: 'JavaScript is ...'},
  ]);
  let content = null;
  let contextControl = null;
  if (mode === 'WELCOME') {
    content = <Article title="Welcome" body="Hello, WEB"></Article>
  } else if (mode === 'READ') {
    let title, body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
    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') {
    content = <Create onCreate={(_title, _body) => {
      const newTopic = {id: nextId, title: _title, body: _body,}
      const newTopics = [...topics] 
      newTopics.push(newTopic); 
      setTopics(newTopics);
      setMode('READ');
      setId(nextId);  
      setNextId(nextId + 1);
    }}></Create>
  } else if (mode === 'UPDATE') {
    let title, body = null;
      for (let i = 0; i < topics.length; i++) {
        if (topics[i].id === id) {
          title = topics[i].title;
          body = topics[i].body;
        }
      }
    content = <Update title={title} body={body} onUpdate={(title, body) => {
      const newTopics = [...topics] 
      const updatedTopic = {id: id, title: title, body: body}
      for (let i = 0; i < newTopics.length; i++) {
        if(newTopics[i].id === id) {
          newTopics[i] = updatedTopic;
          break;
        }
      }
      setTopics(newTopics);
      setMode('READ');
    }}></Update>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={() => {
        setMode('WELCOME');
      }}></Header>
      <Nav topics={topics} onChangeMode={(_id) => {
        setMode('READ');
        setId(_id);
      }}></Nav>
      {content}
      <ul>
        <li>  
          <a href="/create" onClick={(event) => {
          event.preventDefault();
          setMode('CREATE'); 
          }}>Create</a>
        </li>
        {contextControl}
      </ul>
    </div>
  );
}

export default App;

✨ 끝 !

✦ 출처 : 생활코딩 [React 2022년 개정판]