간단하게 todo리스트를 생성하고 하면서 배운 점들을 서술하고자 한다.
todo리스트 생성하기
1) input창에 쓴 글 반영하기
여기에 input창에 글을 쓰면 todo리스트가 생성되게 해야 한다.
const [text, setText] = useState("");
const onChangeHandler = (event) => {
setText(event.target.value);
};
<input
type="text"
onChange={(event) => onChangeHandler(event)}
placeholder="해야 할 일을 입력하세요."
value={text}
/>
<input type="submit" value="입력" />input을 만들어 입력한 글을 input창으로 변하게 해야 한다. 그럴려면 value에 useState로 선언한 변수가 들어가야 한다. 그리고 계속적으로 input창이 변하기 때문에 onchange이벤트를 넣어줘야 한다.
그리고 이를 핸들러로 만들어서 변수에 선언되게 해야 한다. 그러면 input창이 쓴 글에 따라 변화되게 된다.
2) input에 쓴 글을 todolist에 반영하기
<form onSubmit={(event) => onSubmitHandler(event)}>
<input
type="text"
onChange={(event) => onChangeHandler(event)}
placeholder="해야 할 일을 입력하세요."
value={text}
/>
<input type="submit" value="입력" />
</form>입력 input을 submit버튼으로 만들어서 쓴 글을 onsubmithandler에 반영되게 하였다.
const [todoList, setTodoList] = useState([]);
const onSubmitHandler = (event) => {
event.preventDefault();
if(!text) return;
setTodoList((prev) => [
...prev,
{ id: todoList.length, text, checked: false },
]);
setText("");
};submit버튼이 반영이 안되게 하였고, 조건문을 써서 빈칸이면 글이 todolist에 반영이 안되게 하였다.
빈칸이 아닐 경우에는 id, text, checked를 넣어 투두리스트를 업데이트 시켜주었다. 그리고 input태그는 빈칸으로 업데이트 시켰다.
3) todolist 화면에 추가하기
{todoList.map((todoList) => (
<div key={todoList.id}>
<input
type="checkbox"
onClick={(event) => checkedItem(event, todoList.id)}
/>
<span
className={(todoList.checked ? " checked" : "")} >
{todoList.text}
</span>
<button type="button" onClick={() => onDeleteHandler(todoList.id)}>x</button>
<br />
</div>
))}todolist에 넣은 배열을 하나씩 나열하기 위해서 map을 사용해서 넣어준다. 그리고 마지막에 <br />주어 todolist 하나당 한 행만 차지할 수 있도록 아래칸으로 갈 수 있게 하였다.
todolist 삭제하기
todolist를 생성했다면 삭제도 가능해야 한다. 여기서 체크박스를 클릭했을 때 todolist가 줄이 그어지도록 하고 마지막으로 x버튼을 눌렀을 때 삭제하도록 하였다.
1) 체크박스 체크
<input type="checkbox"
onClick={(event) => checkedItem(event, todoList.id)}/>
const checkedItem = (event, id) => {
console.log(id);
setTodoList(
todoList.map((todoList) =>
todoList.id === id
? { ...todoList, checked: !todoList.checked }
: todoList
)
);
};체크박스를 클릭했을 때, todlist의 아이디와 현재 아이디가 일치했을 경우 checked 속성에 true로 변환해줄 것이다. 이렇게 코드를 짰을 때 편리함은 있지만 다른 속성을 업데이트하면서 추가하는 경우에는 불편함이 있을 것이라고 생각한다. 배열의 속성만 업데이트를 하는 경우에만 저렇게 코드를 짜야 한다.
2) span속성 변환
<span className={(todoList.checked ? " checked" : "")}>
여기서 아까 배열의 속성 중 checked에 true로 바뀌면 줄긋기 속성이 나타나야 되어야 한다. 그러기 위해서는 아래와 같이 css속성을 설정하고 true일 때 이 속성이 나타나도록 className을 변형하도록 한다.
.checked {
text-decoration: line-through;
}
3) todolist 삭제
이 부분은 내가 생각하기에 제일 쉬운 부분같다. filter를 쓰면 새로운 배열이 생성되어 이를 다시 설정해주면 그 배열만 todolist에 나타난다.
const onDeleteHandler = (id) => {
setTodoList(todoList.filter(todoList=>todoList.id !== id))
}
<button type="button" onClick={() => onDeleteHandler(todoList.id)}>x</button>위와 같이 button을 클릭시 todolist의 아이디를 가져와서 핸들러에서 filter를 써주어 id와 일치하는 것을 뺀 나머지 배열을 또 다른 배열로 만들어 이를 설정한다.
