Todolist(4) - 추가기능, 마무리

이진아·2021년 7월 1일
0

toy Project

목록 보기
4/4

주제 : TodoList

기능 :
1. 원하는 item onClick하면 title, content 내용이 나옴
2. 수정 기능
3. 삭제 기능
4. 추가 기능

<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를 처음 공부할 때 만들었던 작은 프로젝트 중 하나다. 많은 프로젝트를 만들어보고 다시 만들어보니 기본적인 개념이 다 들어있어서 개념들을 다시 상기시킬 수 있었다!

profile
새싹 개발자><

0개의 댓글