TodoList 추가 기능 구현

export default function Input({ setTodos }) {

const [title, setTitle] = useState("");

const [contents, setContents] = useState("");

const handleSubmitChange = (event) => {

event.preventDefault();

const newTodo = {

title: title,

contents: contents,

isDone: false,

id: uuidv4(),

};

setTodos((prev) => {

return [...prev, newTodo];

});

};

const handleTitleChange = (event) => {

setTitle(event.target.value);

};

const handleContentsChange = (event) => {

setContents(event.target.value);

};

return (

<section>

<form onSubmit={handleSubmitChange} className="inputBox">

제목 : <input onChange={handleTitleChange} value={title} />

내용 : <input onChange={handleContentsChange} value={contents} />

<button>추가</button>

</form>

</section>

);

}

1.

const newTodo = {

      title: title,

      contents: contents,

      isDone: false,

      id: uuidv4(),

    };

새로운 배열을 만들어서 넣어야함 

기본틀 title 과 contents 만 바꿔서 넣어줌

 

 

2.

setTodos ((prev)=>{

Return […prev, newTodo]

})

 

setTodos 를 발생시켜서 누적되어 있는 값 todos 값은 그대로 두고 todos 값에 newTodo를 넣는다?

이런식으로 추가 기능 구현!

추가기능!