• 양식 참고

1️⃣ Firebase Initialize Error

일정으로 인해 며칠간 동작하지않다 실행시키니 “Component auth has not been registered yet”라는 에러와 함께 firebase의 export const auth = getAuth(app); 구문에서 에러 발생

⭐️ SOLVE?

1. 공식문서를 확인하니 11/9에 10.6.0 으로 version update 되어서 firebase@latest 로 package 업데이트
2. import 구문에서 from에서 "@firebase/app"나 "@firebase/firestore"와 달리 auth의 경우만 "firebase/auth"을 발견 후 "@firebase/auth"으로 수정하니 오류 없이 진행됨

🤷‍♀️ WHY?

chatgpt에게 차이점을 물어보니 @firebase/auth ****의 경우 모듈식 SDK, firebase/auth 의 경우 기본(전통적인)SDK 방식이라고 하며, 내가 사용하던 getAuth의 경우 모듈식이었으므로@firebase/auth 가 맞는 from 출처이다. 확실하지는 않으나 버전이 업데이트 되면서 구분이 명확해져 생긴 오류로 보인다.

2️⃣ useState call Error

Modal Component 내에서 useState Hook을 사용하고자 호출하였으나 호출에러 발생

⭐️ SOLVE?

if (!isOpen) return null; 구문을 시작으로 Modal Component가 호출되고 있음을 발견 
이후 호출 순서 변경

**기존 코드**
export default function Artwork_Modal({
  isOpen,
  closeModal,
  artworkInfo,
  currentUser,
}: ModalProps) {
  if (!isOpen) return null;

  const [isSaved, setIsSaved] = useState<boolean>(false);
	...

}

**변경 코드**
export default function Artwork_Modal({
  isOpen,
  closeModal,
  artworkInfo,
  currentUser,
}: ModalProps) {
  const [isSaved, setIsSaved] = useState<boolean>(false);

  if (!isOpen) return null;
	...

}

🤷‍♀️ WHY?

useState 훅이 함수 컴포넌트 내에서 조건에 따라 호출되고 있기 때문에 React Hooks의 호출 조건을 무시했기 때문에 발생한 오류이다. 호출 조건은 다음과 같다.

1. 최상위 수준에서 호출되어야 한다 : useState 훅은 함수컴포넌트의 최상위수준에서 호출되어야 하며 조건문, 반복문, 중첩함수와 같은 블록내에서는 호출할 수 없다.
2. 렌더링시 항상 동일한 순서로 호출 되어야 한다 : 조건부로 호출하거나, 루프안에서 호출할 수 없다.

기본적인 규칙이지만 너무 익숙해서 잊고 진행함에서 발생한 오류라고 생각한다.