리액트에서 로그인 처리하는 방법

일단 왜 form태그를 사용하는지부터 이해해야 한다.

웹 표준 때문!

 

입력 요소들을 폼태그 안에 넣으라고 권고하고 있다. 

submit을 통해 전송하도록 권고하고 있다. 

 

 

폼태그에 포함된 버튼태그는 타입 설정을 따로 하지 않으면 기본 타입이 submit이다.

submit을 클릭하면 form action에 명시된 주소값으로 전송된다

action값에 아무것도 전송하지 않으면 현재 페이지에 전송해서 새로고침 됨

 

→ 1번 방법: button 태그의 button 타입을 활용한 클릭이벤트<button type=”button” onClick={login}></button>

→ 2번 방법: 폼태그를 활용해서 처리해주는 게 더 웹표준에 맞고 이득임

const login = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    // 이메일 입력한 값 가져오고
    // 비밀번호 입력한 값 가져오고
    // API 통신 해서 통신 서버로 이메일과 비밀번호 전송
    // 서버에서 응답 받은 결과에 따라서
    // 로그인 성공 혹은 실패
    console.log("로그인");
  };
  
return (
  <form action="" onSubmit={(e) => login(e)}>
    <input type="text" placeholder="이메일" />
    <input type="password" placeholder="비밀번호" />
    <button type="submit">전송</button>
  </form>
)

 

form 태그 안에서 값을 처리하고 싶을 땐 엔터 바로 누르면 submit이 알아서 호출된다 → 개꿀~!~!~

각 태그마다의 고유의 이벤트를 방지해주는 것이 (폼태그는 서브밋이 기본 이벤트임)

왜 폼태그를 사용하는가?!

웹 표준 때문!

입력 요소들을 폼태그 안에 넣으라고 권고하고 있다.

preventDefault를 통해 버튼의 타입이 submit이더라도 페이지 전송을 방지할 수 있다.

button타입을 활용한 클릭이벤트보다는 폼태그를 활용해서 처리해주는 게 더 웹표준에 맞고 이득임