[23.11.03] 오늘의 TIL

preventDefault
브라우저의 기본 동작을 방지하는 역할

브라우저의 기본 동작

1. checkbox 태그 클릭 시 체크
2. a 태그 클릭 시 url 이동
3. form 태그 안 submit 버튼 클릭 시 데이터 전달하면서 페이지 이동

이와 같은 기본 동작을 막는 역할을 하는데

특히 3번과 같은 경우에는
submit 버튼을 클릭하게 되면 데이터를 전달하면서 새로고침을 하게되는데
사용자가 입력한 정보를 받아오기 위해서는 새로고침을 방지해야 하므로 사용하게 된다.

---

이번에 TodoList 를 개인과제로 제작해야하는데

    const addTodo = (event) => {
        event.preventDefault();
        console.log(todo)
        setTodoList([...todoList, { ...todo, todoId: todoNumber }]);
        setTodo(defaultInput);
        todoNumber++;
    }

이렇게 todo 를 추가하고나서 새로고침을 막기위해 preventDefault를 사용해주었다