객체로 이루어진 배열에 객체 추가하기 - 리액트 React hooks

  let newInfo = {
    id: "n",
    todo: todoValue,
    memo: memoValue,
  };

이렇게 데이터를 작성했어서 오류가 나지 않았나보다. 그렇지만 리액트에서는 원본 데이터를 건드리지 않아야 하니까 저렇게 지속적으로 데이터를 바꾸는 방식은 좋지 않을 것 같아 수정했다.
이번엔 아래와 같이 useState를 이용하였더니 마지막 글자가 안보이는 에러가 생겼다.

let [newTodo, setNewTodo] = useState({ name: inputValue });

전체코드

import React, { useEffect, useState } from "react";
import "./App.css";
import react from "react";

function App() {
  let [inputValue, setInputValue] = useState("");
  const [todo, setTodo] = useState([{ name: "" }]);
  let [newTodo, setNewTodo] = useState({ name: inputValue });

  const inputChg = (e) => {
    setInputValue(e.target.value);
    setNewTodo({ name: inputValue });
  };

  const OnSubmit = (e) => {
    e.preventDefault();
    setTodo([...todo, newTodo]);
  };
  const todosMap = todo.map((todoItem, i) => <p key={i}>{todoItem.name}</p>);
  return (
    <div className="parent">
      name: {todosMap}
      <form onSubmit={OnSubmit}>
        <input value={inputValue} onChange={inputChg}></input>
        <button>저장</button>
      </form>
    </div>
  );
}

export default App;

클래스 컴포넌트에서 setState() function은 비동기적으로 작동해서 그렇다는데.. 함수형도 그런건가?? https://stackoverflow.com/questions/33088482/onchange-in-react-doesnt-capture-the-last-character-of-text

import React, { useEffect, useState } from "react";
import "./App.css";
import react from "react";

function App() {
  const [todo, setTodo] = useState([{ name: "" }]);
  let [inputValue, setInputValue] = useState("");
  let [newTodo, setNewTodo] = useState({ name: "" });

  const inputChg = (e) => {
    setInputValue(e.target.value);
    setNewTodo({ name: inputValue });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    setTodo([...todo, newTodo]);
    setInputValue("");
  };

  const todosMap = todo.map((todoItem, i) => <p key={i}>{todoItem.name}</p>);
  return (
    <div className="parent">
      name: {todosMap}
      <form onSubmit={onSubmit}>
        <input value={inputValue} onChange={inputChg}></input>
        <button>저장</button>
      </form>
    </div>
  );
}

export default App;

콘솔로그를 해보면 아무 동작을 하지않았음에도 처음에 렌더링이 두번 되어있다. 알아서 useEffect가 실행된듯하다ㅠ 그래서 로드되자마자 지 혼자 인풋 값이 비어있는 상태에서 바로 배열에 추가해버림..
[deps]추가했으면 이거 수정할 때만 되는거 아닌가? 그게 아니라, [deps]가 수정될 때 뿐만 아니라 처음 렌더링될때에도 실행된다.

이번에는 deps 에 특정 값을 넣어보도록 하겠습니다. 
deps 에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 됩니다. 
그리고, deps 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 됩니다.
출처: https://react.vlpt.us/basic/16-useEffect.html

코드는 이렇게 작성했었다

import React, { useEffect, useState } from "react";
import "./App.css";
import react from "react";

function App() {
const [todo, setTodo] = useState([{ name: "" }]);

let [inputValue, setInputValue] = useState("");
let [newTodo, setNewTodo] = useState({ name: "" });

const inputChg = (e) => {
  setInputValue(e.target.value);
};

const onSubmit = (e) => {
  e.preventDefault();
  setNewTodo({ name: inputValue });
};

useEffect(() => setTodo([...todo, newTodo]), [newTodo]);
console.log(todo);
const todosMap = todo.map((todoItem, i) => <p key={i}>{todoItem.name}</p>);
return (
  <div className="parent">
    name: {todosMap}
    <form onSubmit={onSubmit}>
      <input value={inputValue} onChange={inputChg}></input>
      <button>저장</button>
    </form>
  </div>
);
}

export default App;

newTodo가 바뀔 때마다 setTodo를 이용해서, 전체 todo의 값에 새로운 todo를 추가해주려고 했다.
그런데 오류가 나서 구조를 수정하였다.