로그인 페이지 서버와 통신

서버와 연결을 위해 코드를 작성하고 아래 로그인을 시도해 보았지만
로그인 버튼을 클릭하는 순간 리다이렉션이 되는 현상이 계속 되었다.
왜 이럴까

시도1: 백엔드 서버와의 통신 점검
결과: 게시판의 GET은 되므로 아님

시도2: consloe.log 찍어보기
결과: 콘솔은 받는다.

시도3: 리다이렉션 된다는것을 파악하게됨

원인

form 태그는 기본적으로 제출되면 웹 페이지를 새로고침하거나 다른 페이지로 리디렉션되는 동작을 수행합니다. 이 동작은 폼을 제출하는 것이 일반적인 웹 페이지의 기본 동작이기 때문에 브라우저가 기본적으로 수행합니다.

그러나 React 애플리케이션에서는 주로 SPA (Single Page Application) 방식을 사용하며, 전통적인 웹 페이지처럼 매 요청마다 새로운 페이지를 로드하는 것이 아닌, 단일 페이지 내에서 동적으로 컴포넌트를 교체하면서 사용자와 상호작용하는 방식을 취합니다.

이런 SPA 방식에서는 폼 제출 시 페이지 리로딩 없이 AJAX 요청을 사용하여 서버와 상호작용하고, 페이지를 업데이트하는 것이 일반적입니다. 이러한 동작을 위해서는 event.preventDefault() 함수를 사용하여 폼의 기본 제출 동작을 막아야 합니다.

따라서 LoginState 함수 내에서 폼을 제출할 때 event.preventDefault()를 호출하지 않았기 때문에, 폼이 기본적인 제출 동작을 수행하고 페이지가 새로고침되면서 SPA 방식의 장점을 잃어버리는 문제가 발생했던 것입니다.

event.preventDefault()를 추가하여 폼 제출의 기본 동작을 막으면, 페이지가 리로딩되지 않고 비동기 요청이 수행되도록 할 수 있습니다.

  const LoginState = async (event) => { 
    event.preventDefault();
    console.log(process.env.REACT_APP_SERVER_URL)
    try {

따라서 함수 내에 event.preventDefault();를 추가 해줬더니 깔끔하게 로그인이 됌