useState만 이용하여 ToDoList 만들기 초안

5시간 넘게 고민하다가 기술멘토님에게 도움을 받아 완성했다.

import React, {useState} from 'react'
// useState 불러오기
function App() {
	const [todoList, setTodoList] = useState([])
    // 리스트로 담을 배열 만들기
	const [inputs, setInputs] = useState({
		title : "",
		content : ""
	})
    // inputs값에 따라 값이 변화되게 할 것이므로 하나로 통일
    // 전에는 title, content를 나눠서 했다.

const onChangeHandler = (e) => {
setInputs({
	...inputs,
	[e.target.name] : e.target.value
})}
// 입력값을 순서대로 처리해주는 로직 컴퓨티드 뭐라고 했는데 기억이 안 난다. 새로 배우는 기술이므로 잘 익혀두자.
		

const onSubmitHandler = () =>{
	const newTodoList =  [...todoList, inputs];
	setTodoList(newTodoList)
}

// 핸들러로 새로운 todoList 배열을 만들어준다.


  return(
    <div>
      제목 <input type="text" name="title" onChange={onChangeHandler}/>
			내용 <input type="text" name="content" onChange={onChangeHandler}/>
			<button type="button" onClick={onSubmitHandler}>추가하기</button>
			<ul>
					{todoList.map((item) =>{
						return <li key={item}>{item.title} {item.content}
						</li>
					})}
				</ul>


    </div>

// 이후 html에 적용. map 메서드를 이용하여 item을 출력
  )

}

export default App;

다음에 해야 할 일

• id 값 만들어서 삭제 및 완료 상태 만들기