[react] create

어플리케이션이 기본 기능 (CRUD) 중 create!

Create

📌 form를 react에서 다루는 법

//form
function Create(props) {
  return (
    <article>
      <h2>Create</h2>
      <form
        onSubmit={(event) => {
          event.preventDefault(); //submit event 막음
          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"></input>
        </p>
      </form>
    </article>
  );
}

📌 event.target.value : event가 발생하는 target을 의미하는데,
여기서는 onSubmit()이 실행 될 때 event가 발생하는 target은 form이다.
📍 form의 title를 가져오려면 event.target.title
📍 title의 value까지 가져오려면 event.target.title.value

1. form
2. onSubmit() event 실행 (onSubmit()은 하단 <input type="submit" value="Create"></input>의 event)
3. input의 vlaue 담아줌
4. props로 onCreate(title, body) 넘김

//app
function App() {
  const [mode, setMode] = useState("welcome");
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4); // 지금 list에 있는 id의 마지막 값은 3 > 다음 값으로 사용될 값은 4
  const [list, setList] = useState([
    { id: 1, title: "one", body: "body" },
    { id: 2, title: "two", body: "body" },
    { id: 2, title: "three", body: "body" },
  ]);
  let content = null;
  if (mode === "welcome") {
  // 생략
  } else if (mode === "READ") {
    let title, body = null;
 // 생략
    content = <Article title={title} body={body}></Article>;
  } else if (mode === "CREATE") {
    content = (
      <Create
        onCreate={(title, body) => {
          const newList = { id: nextId, title: title, body: body };
          const newListCopy = [...list];
          newListCopy.push(newList); 
          setList(newListCopy);
          setMode("READ");
          setId(nextId);
          setNextId(nextId + 1);
        }}
      ></Create>
    );
  }
  return (
    <div className="App">
      <Header></Header>
      <Nav
        list={list}
        onChangeMode={(id) => {
          setMode("READ");
          setId(id);
        }}
      ></Nav>
      {content}
      <ul>
        <li>
          <a
            href="/create"
            onClick={(event) => {
              event.preventDefault();
              setMode("CREATE");
            }}
          >
            Create
          </a>
        </li>
      </ul>
    </div>
  );
}

다 안봐도 되고, mode === CREATE부분만 봐도 무방하다.

📌 useState()의 상태를 만들 때 데이터 다루는 법

📍 const[value, setvalue] = useState(PRIMITIVE)

PRIMITIVE는 원시값으로, string, number, boolean, undefined, bigint, symbol, null로 불변하는 값이다. 변형 할 수 없음.

📍 const[value, setvalue] = useState(Object)

Object는 범 객체로, Object, array로 처리할 때 value를 새롭게 복사 후 사용해야함
newValue = {...value} //object
newValue = [...value] //array
이렇게 생성된 newValue로 setValue(newValue)를 담아야 컴포넌트가 재실행!