[ React ] GET 호출하지도 않았는데 계속 GET 호출되는 현상

 

  const onClickLogin = () => {
    axios
      .post(`/api/comm/user/signin`, {
        id: id,
        password: pw,
      })
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

로그인 기능을 수행하는 함수를 작성했는데, 계속 get이 찍힌다.

 

물음표가 붙는 이유는,

HTML 폼이 GET 메소드로 제출되면, 폼 필드 값이 자동으로 쿼리 스트링으로 추가되기 때문이다.

 

const onClickLogin = (event) => {
    event.preventDefault();
    axios.post(`/api/comm/user/signin`,{
      id:id,
      password:pw
    }) 
    .then((response) => {
      console.log(response.data)
    })
    .catch((error) => {
      console.log(error);
    });
  }

 

그래서 event.preventDefault(); 이부분 추가. 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정

 

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

Event.preventDefault() - Web API | MDN