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

authenticate을 true/false로 바꿀 수 있는 함수는? setAuthenticate 

 

<개념>

authenticate = state

setAuthenticate = state값을 바꾸는 함수

 

setAuthenticate함수를 로그인 함수에서 사용해야 한다.

- setAuthenticate 함수를 어떻게 Login 컴포넌트에서 쓰지?

 

props로 보내버리면 된다! (함수도 props로서 보내 수 있다)

 

App.js

 

useEffect()로 값이 바뀌었는지에 대한 여부를 알 수 있다.

 

~ [authenticate] = authenticate 값이 바뀔때마다 (console.log)프린트한다.

 

Login.js

<실행 결과>

버튼을 아직 안누른 초기상태

버튼을 한번 누른 상태

끝!이아니다~

 

로그인을 하면 다시 메인페이지로 돌아오도록 해보자.

 

다시 페이지로 돌아가고 싶을땐?

useNavigate를 쓰면 된다.

 

useNavigate를 import(임포트) 시켜준다.

navigate라는 함수를 정의한다.

홈 화면으로 (돌아)간다.

 

<실행 결과 화면>

로그인 버튼을 누르면...

메인 페이지로 돌아온다!!!