useEffect, Navigate

useEffect훅의 두 번째 인자 useEffect 훅은 첫번째 렌더링과 이후의 모든 업데이트에서 콜백함수를 호출합니다. 하지만 이렇게 업데이트가 일어날 때 마다 기능을 실행하는것이 불필요할 수 있습니다.

useEffect의 두 번째 인자에 빈배열을 전달하면 딱 한번 실행되도록 만들어 최적화 할 수 있습니다. (https://ko.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)

 

 

https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#onauthstatechanged

Auth | JavaScript SDK  |  Firebase JavaScript API reference

 

파이어베이스의 유저정보 상태를 관찰하기 위해 onAuthStateChanged 함수를 사용합니다.

그리고 이 함수를 AuthContextProvider 컴포넌트가 초기화 될때 한번 실행되도록 useEffect 훅을 사용합니다.

 

 

 

<Navigate> 컴포넌트

이전에는 조건에 따른 라우트를 변경하기 위해 <Redirect>컴포넌트를 사용했지만 react-router-dom V6 로 오면서 <Navigate> 컴포넌트가 그 역할을 합니다.(https://reactrouter.com/docs/en/v6/components/navigate)

replace 속성의 값이 false 라면, 브라우저에서 뒤로 가기를  했을 때 리다이렉트 되기 이전의 url로 이동하는것이 가능하지만 true 라면 불가능합니다.