4. 쇼핑몰 웹사이트 만들기 (15)

프론트엔드에서는...

아이디와 비밀번호를 입력한 후 로그인 버튼을 클릭하면 자동으로 로그인이 되었다고 가정!

 

로그인을 한 유저인지 아닌지를 알려주는 state = authenticate, setAuthenticate

useState

false이면 로그인이 안됐다/ true이면 로그인이 되었다.

 

우리가 해주고 싶은것 => 로그인 버튼을 클릭하면? 

authenticate의 값이 true로 바뀌어야 한다!!

버튼을 눌렀을 때의 event를 만들어주자~

 

onClick을 하려고 했는데... type="submit" ㅜㅜ

 

주의할점!

<Form>!!!

<Form></Form>이 (버튼을 포함해서) 모든 것을 감싸고 있다.

 

로그인을 하고싶으면 그 요청을 서버,백엔드로 보내서 거기서 id와 비밀번호가 같은지 검사를 한다.

Form이란? 내가 어떤 유저에게 정보를 받고(입력받은 정보를 가지고)  그걸 백엔드로 보내고 싶을 때 사용하는 것

 

>특징>

로그인 버튼(노랑색)을 누르면 계속 새로고침이 된다.

이유: 로그인을 하는 순간 서버에 요청을 하면서 얘가 자동으로 리프래시한다.

이건 그냥 클릭 이벤트랑은 조금 다르다- 클릭만 하면 끝나는데...

이건 계속 새로고침...리프래시되고..뭔가 달라...

이건! onSubmit이라는 이벤트~~

Form안에 Button이 있고 type="submit"이면 onClick으로 이벤트를 주면 안된다!!!

onSubmit이라는 이벤트를 사용해야함!

 

 

 

 

<결과>

 

로그인 버튼을 눌렀는데 console에 1초정도 "login user function issue"라고 잠깐 나오고 사라진다.

새로고침을 할때마다 이런 현상이 나타난다.

이유: 

페이지를 다시 새로고침하기 때문에 사라진다!

 

(버튼을 누를때) Form이 매번 새로고침(refresh) 하는 것을 막아주어야 한다!!

(로그인 하는데에 새로고침 할 필요는 없자나~)

 

<해결>

 

Form 자체에서 주는 event가 있다.

이 event를 파라미터 값으로 가져온다.

 

이럴때 쓰라고 주는 함수,,,, preventDefault()함수

 

<여기까지의 최종 화면 >

우측 상단 로그인을 누르면...

상단 일부

노란색 로그인 버튼을 누르고...

console창을 열어보면...?

 

한번 더 누르면?

[결론]

만약에 Form을 쓰게 되면...

항상 event.preventDefault( ) 함수 사용하기!!

이 함수는 페이지가 계속 새로고침되는 것을 막아준다~