Context_ hook

27/Sep/2022

auth context & auth hook

auh context file

• tsx file! ( not .ts!)
• use custom hook to fix error 1

error 1

• create us_firebase_auth.ts

• add loading, user states
  

• sign in 함수 async

• try & catch 넣기

• user 정보 유뮤에 따라서 conditional
  

• sign out 함수 -> user와 loading 초기화

• 필요한 값 return
  

로그인 후 정보변경점에 대한 코드 => useEffect

11:08
1. empty dependency array => only works 1 time
unsbscribe 는 unmount 될 때 return

2. onAuthStateChange 에 들어갈 action 함수로 만들기

• auth state 가 변할 때마다 state에 대한 값을 받음.
  a. user === null 일때 정의
  
  b. 값이 존재하는 경우 => loading 처리하고 원하는 user 값 넘기고, loading false

3.코드 추가

전체코드
1. hook file

2. context file
before

after
line 22 const auth 로 반환값 넣기

3._app.tsx file
line 10 AuthUserProvider 추가

로그인/아웃 버튼 코드 변경

before

onclick 함수 지우고, provider 지움

useAuth에서 signInWithGoogle 가져와서 사용해주기
line 5, 8, 18

References

https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C/unit/117293?tab=curriculum