React_UPDATE

먼저, Update 버튼을 만들자.

조건으로 상세 목록을 클릭했을때만 보이고 싶다.

function App() {
//...
  let contextControl = null;
//...
  } else if (mode === "READ") {
// ...
    contextControl = (
      <li>
        <a href={"/update/" + id}>Update</a>
      </li>
    );
// ...
  return (
// ...
      <ul>
// ...
        {contextControl}
      </ul>
    </div>
  );
}

---

먼저 Update를 하기위한 원리에 대해 생각해보자.

Update 버튼을 클릭했을때, 기존의 값이 Create Form에 들어와서 수정가능하게 되어야한다.

이 구조를 만족시키기 위해서, props로 Component에 값을 내려줘야 한다. 하지만, 값을 받은 Component는 수정이 불가능하다. 왜? props는 마치 어명과 같다. 유저가 Component에 내린 어명.

이러한 값을 변경하기 위해 사용하는 것 => State

 

- onChange

요소에 변화가 생겼을때 실행되는 HTML의 이벤트 속성이다.

---

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) => {
              // console.log(event.target.value);
              // console.log(event.target);
              setTitle(event.target.value);
            }}
          />
        </p>
        <p>
          <textarea
            name="body"
            placeholder="body"
            value={body}
            onChange={(event) => {
              setBody(event.target.value);
            }}
          ></textarea>
        </p>
        <p>
          <input type="submit" value="Update" />
        </p>
      </form>
    </article>
  );
}

function App() {
// ...
  let contextControl = null;
  if (mode === "WELCOME") {
 // ...
  } 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) => {
          console.log(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 className="App">
      //...
        {contextControl}
      </ul>
    </div>
  );
}

export default App;

Update는 Create에서 props로 값을 받은 것을 미리 입력해둔 form으로 받는다.

값을 수정하기 위해서는, State를 사용해야 한다.

onChange는 요소(element)가 변경(change)될때마다 실행된다.

value로 title, body를 받아오고, event로 상태(State)를 이용한다.

최종 Update이 클릭됬을때, 변경되는 건 topics라는 array이므로, Create와 마찬가지로, State로 배열을 바꿔줘야한다.

 

코드를 보는순서는 App의 Update컴포넌트에서 정보를 어떤것을 사용했는지,

Update 컴포넌트(함수)에서 어떻게 값을 받고, 변경하는지,

최종 Update할때 자료를 어떻게 수정하는지에 대해 보면 더 쉽게 이해될것이다.

---

- 전체 코드 및 내용 정리, 후기

 

// import logo from './logo.svg';
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 lst = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lst.push(
      <li key={t.id}>
        <a
          id={t.id}
          href={"/read/" + t.id}
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode(Number(event.target.id));
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{lst}</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" />
        </p>
        <p>
          <textarea name="body" placeholder="body"></textarea>
        </p>
        <p>
          <input type="submit" value="Create" />
        </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) => {
              // console.log(event.target.value);
              // console.log(event.target);
              setTitle(event.target.value);
            }}
          />
        </p>
        <p>
          <textarea
            name="body"
            placeholder="body"
            value={body}
            onChange={(event) => {
              setBody(event.target.value);
            }}
          ></textarea>
        </p>
        <p>
          <input type="submit" value="Update" />
        </p>
      </form>
    </article>
  );
}

function App() {
  // const _mode = useState("WELCOME");
  // const mode = _mode[0];
  // const setMode = _mode[1];
  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++) {
      // console.log(topics[i].id, id);
      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>
    );
  } 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) => {
          console.log(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 className="App">
      <Header
        title="REACT"
        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 구조랑 JS 문법을 다시 좀 더 익혀야겠다.

 

오늘의 목표는 CRUD 다 공부하고, 자료조사 다 하고, 회원가입페이지도 만들고 싶지만..

절대 안될듯.

 

지금 배고픔은 가짜 배고픔,

또 먹으면 변할 수 없다.