Day 30, React

오늘은 생활코딩 리액트 강의를 들었다.

2022년에 만든 강의라 따라하는데 에러는 1도 없었지만..

문제는 그냥 어려웠다...

 

React로 CRUD 하는 거 ... 왜 이리 어렵죠...? ㅠㅠㅠ

 

 

 

 

 

 

---

 

App.js

import { useState } from "react";

import "./App.css";

function Article(props) {

  return (

    <article>

      <h2>{props.title}</h2>

      <p>{props.body}</p>

    </article>

  );

}

function Header(props) {

  return (

    <header>

      <h1>

        <a

          href="/"

          onClick={(event) => {

            event.preventDefault();

            props.onChangeMode();

          }}

        >

          {props.title}

        </a>

      </h1>

    </header>

  );

}

function Nav(props) {

  const list = [

    // <li>

    //   <a href="/read/1">html</a>

    // </li>,

    // <li>

    //   <a href="/read/2">css</a>

    // </li>,

    // <li>

    //   <a href="/read/3">js</a>

    // </li>,

  ];

  for (let i = 0; i < props.topics.length; i++) {

    let t = props.topics[i];

    list.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>{list}</ol>

    </nav>

  );

}

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);

              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 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 App() {

  let content = null;

  let contextControl = null;

  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: "js", body: "js is..." },

  ]);

  if (mode === "WELCOME") {

    content = <Article title="welcome~~" body="welcome 내용입니다"></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"

            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.push(topics[i]);

              setMode("WELCOME");

            }}

          ></input>

        </li>

      </>

    );

  } else if (mode === "CREATE") {

    content = (

      <Create

        onCreate={(_title, _body) => {

          const newTopic = { id: nextId, title: _title, body: _body };

          const newTopics = [...topics];

          console.log(newTopic);

          newTopics.push(newTopic);

          setTopics(newTopics);

          setMode("READ");

          setId(nextId);

          setNextId(nextId + 1);

        }}

      />

    );

  } 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>

      <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;