기능 :
1. 원하는 item onClick하면 title, content 내용이 나옴
2. 수정 기능
3. 삭제 기능
4. 추가 기능
추가 기능은 추가하기 버튼을 누르면 제목 입력, 내용 입력 칸이 뜬다. 여기에 사용되는 것은 수정하기 기능과 삭제하기 기능에서 사용했던 onChange, onClick이 모두 사용된다.
const [open, setOpen] = useState(false);
const Openadd = () => {
setOpen(true);
}
추가하기를 눌렀을 때 열릴 수 있도록 open 관련된 함수를 만들어 주었다.
그다음은 내용과 제목을 입력하고 저장하기를 누르면 submit이 된다.
const addSubmit = (e) => {
e.preventDefault();
if(putform()) {
addList({
title: title,
content: content
});
}
}
여기에서 submit를 사용할 때 주의할점이 있다.
e.preventDefault()를 작성하여야 한다.
그 이유는 페이지를 이동할 때e.preventDefault는 그 동작을 중단시킨다.
그래서 이페이지를 유지하기 위해서 사용이 되어야한다.
Todolist는 React를 처음 공부할 때 만들었던 작은 프로젝트 중 하나다. 많은 프로젝트를 만들어보고 다시 만들어보니 기본적인 개념이 다 들어있어서 개념들을 다시 상기시킬 수 있었다!