React 기초 정리 - 6장 (Delete 기능 구현, 마무리)

React 기초 정리 시리즈의 마지막 정리이기도 한 이번 6장에서는, CRUD 구현의 마지막인 Delete 기능의 구현에 대해 알아보겠다.
이번에도 5장에 이어 egoing님의 코드를 약간 필자의 입맛에 맞게 리팩토링한 코드를 사용할 것이며, 전체 코드는 5장 최하단부에 나와 있다. 시작하자.

Delete 기능 구현

우선, Create, Update와 마찬가지로 Delete 기능을 사용하기 위한 버튼을 만들어 주어야 한다.
이전 장들에서 구현했던 Create, Update와는 다르게, Delete 기능은 특정 페이지(링크)로 이동하지 않고 읽고 있던 topics 내 원소를 즉각 삭제하므로, a 태그가 아닌 button 요소를 이용한다. 해당 button은 사용자가 topics 내 원소를 읽는 중에만 작동하므로, mode가 sub일때 걸리는 if문 내 contextControl의 내용을 바꾸는 부분에 요소를 작성한다.

(<>와 </> 태그는 단지 Html 요소를 묶기 위한 태그이며, 실질적으로 무효하다.)
button 태그는 새로고침 기능을 내장하지 않으므로, 파라미터와 preventDefault()는 적지 않았다.

위와 같이 코드를 작성해 주었다. 이제 onClick 함수 내에 기능을 구현하자.
삭제를 구현할 방법은, egoing 님의 방법대로, 새 배열을 만든 뒤 topics 배열 내 원소들의 id를 순회 검색하며, id가 일치하지 않는 모든 원소를 새 배열에 push하여 새 배열을 setState 해 주는 것이다. 이때 State로의 id는 SUB모드에서 Delete 상태로 넘어왔으므로 읽던 항목의 id 그대로이다. 또, 삭제 시 MAIN 모드로 변경되도록 하자.

이와 같이 코드를 작성하면, 잘 작동한다.

여기까지가 Delete 기능의 완성이다. 최종 코드 전문은 다음과 같다.

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

function Article(props){
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function Header(props){
  return (
    <header>
      <h1><a href="/" onClick={(event)=>{
        event.preventDefault();
        props.onChangeMode();
      }}>{props.title}</a></h1>
    </header>
  );
}

function Nav(props){
  const lis = props.topics.map((topic) => {
    return (
      <li key={topic.id}>
        <a id={topic.id} href={'/read/' + topic.id} onClick={event => {
          event.preventDefault();
          props.onChangeMode(Number(event.target.id));
        }}>{topic.title}</a>
      </li>
    );
  });
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  );
}

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>
        <p><input type='submit' value='Create'></input></p>
      </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>
        <p><input type='submit' value='Update'></input></p>
      </form>
    </article>
  );
}

function App() {
  const [mode, setMode] = useState('MAIN');
  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 === 'MAIN') {
    content = <Article title="Welcome" body="Hello, WEB"></Article>;
  } else if (mode === 'SUB') {
    let title, body = null;
    topics.forEach((topic)=> {
      if (topic.id === id) {
        title = topic.title;
        body = topic.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 = [];
      topics.forEach((topic) => {
        if (topic.id !== id) {
          newTopics.push(topic);
        }
      });
      setTopics(newTopics);
      setMode('MAIN');
    }}></input></li>
    </>
  } else if (mode === 'CREATE') {
    content = <Create onCreate={(title, body) => {
      const newTopics = [...topics];
      const newTopic = {id: nextId, title: title, body: body};
      newTopics.push(newTopic);
      setTopics(newTopics);
      setMode('SUB');
      setId(nextId);
      setNextID(nextId + 1);
    }}></Create>;
  } else if (mode === 'UPDATE') {
    let title, body = null;
    topics.forEach((topic)=> {
      if (topic.id === id) {
        title = topic.title;
        body = topic.body;
      }
    });
    content = <Update title={title} body={body} onUpdate={(title, body) => {
      const newTopics = [...topics];
      const updatedTopic = {id: id, title: title, body: body};
      newTopics.forEach((topic) => {
        if (topic.id === id) {
          newTopics[id - 1] = updatedTopic;
        }
      });
      setTopics(newTopics);
      setMode('SUB');
    }}></Update>
  }

  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode('MAIN');
      }}></Header>
      <Nav topics={ topics } onChangeMode={(selectedID)=>{
        setMode('SUB');
        setId(selectedID);
      }}></Nav>
      { content }
      <ul>
        <li>
          <a href='/create' onClick={(event) => {
            event.preventDefault();
            setMode('CREATE');
          }}>Create</a>
        </li>
        { contextControl }
      </ul>
    </div>
  );
}

export default App;

끝내는 말

비록 이 시리즈를 모두 학습했다고 해서 React를 잘한다고 할 순 없겠지만, React의 기초적인 동작 원리와 개념을 알아보았다고는 할 수 있을 듯 하다. 수년 간 프론트엔드 개발자의 기초 기술 스택으로 자리잡아 온 React의 기본적 소양을 배워본 것에서, 의미를 찾을 수 있다.
양질의 강의를 무료로 제공해 준 생활코딩, egoing님에게 다시 한번 감사드리며 이 시리즈를 마친다.