역시 반복은 학습에 있어서 가장 중요한 요소가 아닐까 합니다.
"투두리스트가 어렵다면, 투두리스트 만든느 동영상을 30번을 보고 찾아와주세요." 라고 말씀하셨던 튜터님의 말씀대로 30번은 아니더라도 현재 10번 정도 영상을 듣고있는데 정말 신기하게도
처음에는 이해가 X였지만 -> 그냥 외워버리자 -> 여기서는 이렇게 쓰는구나 -> 이제는 손이 먼저 반응하는 단계까지 온 것 같다.
우선 투두리스트를 전체적으로(1편과 2편으로 나누어서) 다시 한 번 정리를 해보려고한다.
App.js
import React from "react";
import Header from "./components/Header";
import Input from "./components/Input";
import TodoList from "./components/TodoList";
const App = () => {
return (
<div>
<Header>여긴 헤더입니다.</Header>
<main>
<Input />
<TodoList />
<TodoList />
</main>
<footer>여긴 푸터입니다.</footer>
</div>
);
};
export default App;우선 기본 App.js에서의 화면 구성이다.
사실 이전에 Component도, props도 무슨말인지 잘 몰랐는데 정말 손으로 직접 따라서 쳐보니깐 이해가 가는 것 같다.
Input
import React from "react";
const Input = () => {
return (
<div>
<section>
<form>
제목 : <input />
내용 : <input />
<button>추가</button>
</form>
</section>
</div>
);
};
export default Input;
input component도 위와같이 꾸며준다.
TodoList
import React from "react";
const TodoList = ({ isActive, todos }) => {
return (
<>
{/* is Active true(해야될 것)
isActive false (완료된 것) */}
{isActive === true ? "해야될 것" : "완료된 것"}
{todos
// 여기서 item.isDone이 false이면 아직 안된 것이니, isActive가 true(해야될 것)으로 가야함
.filter((item) => item.isDone === !isActive)
.map((item) => {
return (
<div
key={item.id}
style={{
border: "1px solid black",
padding: "20px",
}}
>
<h3>{item.title}</h3>
<div>{item.contents}</div>
<button>{isActive ? "완료" : "취소"}</button>
<button>삭제</button>
</div>
);
})}
</>
);
};
export default TodoList;
이부분이 가장 헷갈렸다.
filter와 map을 통해 내가 원하는 조건으로 걸러내는 것은 알겠는데
Filter에서 item.isDone === ! isACtive라는 문장이 가장 이해가 안되었다.
계속 이해를 해봤는데, 결국에는 item.isDone와 isActive의 반대가 같다면 Filter해라 라는 말이었다.
그다음, map을 이용해서 item에 위의 filter에서 걸러낸 todo들을 담아서, 다시 랜더링하면 된다.
input
import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
const Input = ({ setTodos }) => {
const [title, setTitle] = useState();
const [contents, setContents] = useState();
const handleSubmitClick = (e) => {
e.preventDefault();
const newTodo = {
title: title,
contents: contents,
isDone: false,
id: uuidv4(),
};
setTodos((prev) => {
return [...prev, newTodo];
});
};
const handleTitleChange = (e) => {
setTitle(e.target.value);
};
const handleContentsChange = (e) => {
setContents(e.target.value);
};
return (
<>
<section>
<form onSubmit={handleSubmitClick}>
제목 : <input value={title || ""} onChange={handleTitleChange} />
내용 :{" "}
<input value={contents || ""} onChange={handleContentsChange} />
<button>추가</button>
</form>
</section>
</>
);
};
export default Input;
이제 다시 input에 와서 각각의 input에 함수를 달아주자
form안에 있는 추가 버튼을 누르면, 내가 기존에 설정했던 Todo를 넣어줘야한다.
특히 setTodos((prev) => {
return [...prev, newTodo];
});
이 부분이 조금 헷갈렸는데, ...prev는 기존의 Todo를 불러온 것이고, newTodo는 내가 추가한 Todo를 불러온 것이다.
그러면 위와 같이, 제목과 내용에 추가를 할 수 있는 투두리스트가 만들어진다.
