typescript + react | form submit e.preventDefault() 작동안함

react 기본 자바스크립트로 만들어둔 todo app을 타입스크립트를 배우고 한번 마이그레이션 해보았다.

그런데 마이그레이션하면서 컴파일에서 에러 내주는 것들을 나름 이것저것 해보면서 빨간 줄 다 없앴다고 좋아했는데 실제로 켜보니 제대로 작동하질 않는 것....??? 

이걸 디버깅 하는데도 시간을 얼마나 들였는지... ^^

다음엔 실수하지 않기위해 기록해본다!

 

📌 문제

form 태그에 submit 이벤트를 등록해두어서 input을 작성하고 추가 버튼을 누르면 내용이 서버로 가고 화면 리스트에 추가가 되어야함.

But, 자꾸 화면이 새로고침됨. 아무런 콘솔도 안보이고 그냥 완전 새로운 화면

이게 e.preventDefault()가 작동을 안해서 그런건지도 한참 이후에 깨달았다... 😂

form 태그 사용하는데 버튼을 누르면 화면이 완전 새로 고침된다???

e.preventDefault()가 제대로 작동이 안되고 있다는 걸 의심하자.. 

 

e.preventDefault() 

원래 브라우저에서는 대표적으로 form을 submit할때 발생하는 이벤트의 기본동작이 있는데, 이런 이벤트는 유저에게 새로고침된 페이지를 보여준다. 이런 기본 동작을 막으려면 event 객체의 preventDefault() 메서드를 사용해서 사용자가 계속 같은 페이지에 머무르게 한다.

 

📌 이전 코드

export const Todo = () => {
const [todoInput, setTodoInput] = useState("");
const submitTodo = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    createTodo({ todoBody: todoInput });
};

return (
        <form onSubmit={(e) => submitTodo}>
          <input
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              setTodoInput(e.target.value)
            }
            value={todoInput}
          ></input>
          <button disabled={todoInput.length === 0}>
            추가
          </button>
        </form>  
	)
}

 

추상화 하자면 이런 코드이다.

이상한 부분이 두 가지 있다.

 

1. submitTodo 함수에서 받는 매개변수 이벤트 객체의 타입 

FormEvent 타입으로 잘 데려왔지만, 그 이벤트가 적용되야되는 타입을 HTMLInputElement 라고 적어둠 

FormEvent 타입이므로 HTMLFormElement 가 되야함

 

2. <form> 태그에 onSubmit 이벤트 핸들러 함수를 등록하는 부분 

이벤트 매개변수를 화살표함수를 사용해서 전달해두고 실제 매개변수는 적어두지 않음 

 

📌 이후 코드

export const Todo = () => {
const [todoInput, setTodoInput] = useState("");
const submitTodo = (e: React.FormEvent<HTMLFormElement>) => { //here
    e.preventDefault();
    createTodo({ todoBody: todoInput });
};

return (
        <form onSubmit={(e) => submitTodo(e)}> //here 
        //<form onSubmit={submitTodo}> //works well too
          <input
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              setTodoInput(e.target.value)
            }
            value={todoInput}
          ></input>
          <button disabled={todoInput.length === 0}>
            추가
          </button>
        </form>  
	)
}

 

리액트에서 이벤트 처리할때는 함수를 그대로 전달하면 되는데, 

이벤트객체 매개변수가 있을땐 화살표 함수로 적어줘도 되고 그냥 바로 함수를 전달해줘도 된다.