React_CREATE

Front의 기본 CRUD를 드디어 시작한다.

이번 목표는 생성한 단어는 nav에 있는 배열에 추가되서 출력되는 동작이다.

기존까지 형태를 보면, event는 항상 막아, url이 바뀌지 않도록 한다.

그리고 우리가 목표로 하는 것은, create를 클릭시, 입력창이 나오게 하고 싶다.

 

---

- SETMODE("CREATE"), CREATE TAG

 

function Create() {
  return (
    <article>
      <h2>Create</h2>
    </article>
  );
}

function App() {
	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>;
  } else if (mode == "CREATE") {
    content = <Create></Create>;
  }
  //...

      <a
        href="/create"
        onClick={(event) => {
          event.preventDefault();
          setMode("CREATE");
        }}
      >
        Create
      </a>
    </div>
  );
}

새로작성한 부분에 대한 코드를 살펴보자.

마지막에 새로운 태그 create를 만들어주었고, event.prevent, setMode를 해주었다.

이때, "CREATE"일때, 새로운 UI를 보여주고 싶어, CREATE 태그인 경우도 추가해주고, 잘 출력되는지 만들었다.

---

- form tag

값을 입력받기 위해, form을 만들어보자.

function Create() {
  return (
    <article>
      <h2>Create</h2>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const title = event.target.title.value;
          const body = event.target.body.value;
        }}
      >
        <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>
  );
}

 

먼저 form 태그 안에 p태그들 부터 보면, title,body,submit을 추가해주었다.

태그안이 빈값일 경우, 보여지는 placeholder

submit 되는 경우, 페이지가 리로딩되므로, form태그 onSubmit에 event.prevent를 해주고, 넘어온 정보 확인을 위해 title, body를 만들었다.

event가 발생할때, event.target에 정보가 들어있다.

이때, event.target은 form 전체 태그를 말하고, title, body로 값을 확인할 수 있다.

출력 UI는 좌측과 같다.

 

 

 

 

 

 

 

---

다음으로 넘어가기 전, State에 대해 더 자세히 이해하자.

상태 State에서 value가 stirng, number, boolean인 경우에 대해 다뤘지만, 만약 Object, array라면..?

복제 를 해야한다.

무슨말이냐면, 원래 값을 복제해서, 그 값을 변경 후, 상태를 그 값에 맞춰준다. 라고 생각해야한다.

왜...? 만약 기존의 값에 push를 하고, 이를 setValue로 변경해도 페이지는 변경되지 않는다.

똑같은 값을 넣어주었기때문이다.

---

// 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 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;
  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>;
  } 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>
    );
  }
  return (
    <div className="App">
      <Header
        title="REACT"
        onChangeMode={() => {
          setMode("WELCOME");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(_id) => {
          setMode("READ");
          setId(_id);
        }}
      ></Nav>
      {content}
      <a
        href="/create"
        onClick={(event) => {
          event.preventDefault();
          setMode("CREATE");
        }}
      >
        Create
      </a>
    </div>
  );
}

export default App;

전체 함수 코드를 복사하였다. 추가 기능은, Create 함수에 props를 주고, props 인자로 준것으로 Object를 만들고, 기존 array를 복제해서, Object 추가 및 상태 변경이다.

이는 코드를 보며 이해하려고 노력하고, 이해가 되지 않으면 이전 글들을 되돌아보자.

---

- 내용 정리 및 후기

 

Create 하기 위한 방법으로, State의 값이 array, Object일때 어떻게 해야하는지에 대해 알아보았다.

강의를 보며, 따라가기 위해 js 문법을 먼저 이해하고, props에 대해 다시 한번 이해하고, State에 대해 이해해야겠다.

시간이 부족하므로, 공부하고, 새로 내가 만들면서 해보는 방법이 가장 빠를것 같다.

 

일주일에 적게는 하루, 많게는 3~4일을 탄수화물을 먹으려고 한다. 매일 낮은 칼로리를 섭취하게 되면 몸이 적응해버린다는 영상을 보았다. 어제 인바디를 한달 조금 넘는기간이 지나서 측정하였다. 순수 체지방 4kg이 빠졌지만, 아직 비만이다 라는 결과를 받았다. 체지방률은 25.8 -> 22.3이지만, 개인적인 욕심으로는 12%까지 만들어보고 싶다.

 

 

어제 먹은 라면때문에,

아직도 배부르다.