이 코드에서는 useEffect를 추가해 앱을 처음 실행할 때 사용자의 로그인 정보를 확인하는 작업을 구현해줬습니다. 여기서 이전에 만든 subscribeAuth라는 함수를 사용했는데, 이 함수의 코드를 다시 한번 확인해볼까요?

lib/auth.js - subscribeAuth

export function subscribeAuth(callback) {
  return auth().onAuthStateChanged(callback);
}

onAuthStateChanged 함수의 인자에는 사용자의 인증 상태가 바뀔 때 호출하고 싶은 콜백 함수를 넣습니다. 콜백 함수를 등록하면 앞으로 인증 상태가 바뀔 때마다 매번 이 콜백 함수를 호출합니다. onAuthStateChanged 함수의 반환 값은 unsubscribe 함수입니다. 반환된 이 함수를 호출하면 앞으로 인증 상태가 바뀌어도 우리가 등록한 콜백 함수를 더 이상 호출하지 않습니다.

우리는 앱 구동 시에 딱 한 번만 사용자 정보를 확인하고 그 이후에는 인증 정보가 바뀌어도 별도로 작업하지 않을 것이기 때문에 unsubscribe 함수를 콜백 함수 내부에서 호출해줬습니다.

콜백 함수는 사용자가 비로그인 상태라면 null을 반환하고 로그인 상태라면 인증 정보를 반환합니다. 만약 인증 정보가 유효하다면 해당 사용자가 프로필 설정까지 했는지 확인하고, 프로필이 있다면 해당 사용자의 정보를 UserContext에 담습니다.

이렇게 작업하고 나면 앱을 리로딩하거나 재시작했을 때도 로그인 상태가 유지될 것입니다. 다만 초반에 1~2초 정도 로그인 화면이 보여졌다가 화면이 전환될 텐데요. 추후 스플래시 화면을 사용해 현재 로그인 정보를 확인한 후 앱 화면을 띄울 것이므로, 지금 로그인 화면이 잠깐 나타나는 것은 신경 쓰지 않아도 됩니다.