잘 작동하는지 확인하는 와중에 경고문이 떴다.

문제 발생!

이메일/패스워드를 사용하여 가입 버튼을 누르니 경고문이 떴다.

⚠️ Warning: Can't perform a React state update on an unmounted component.
This is no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at Auth (...URL)

말인 즉슨, 마운트 해제된 구성 요소에 대해 리액트 state를 업데이트 할 수 없다는 경고이다. 비동기 로직 때문에 이런 현상이 발생하는데, 메모리가 누출될 수도 있기 때문에 고치는 것이 좋다고 한다.

문제가 되는 URL을 눌러 봤더니 Auth.js의 가입 버튼을 누를 때, 라우트는 이미 이동되는데, 그러고 나서 setNewAccount(false)로 state를 변경하려고 하는게 문제였다.

📍 src/routes/Auth.js

//form에 사용하는 이벤트
const onSubmit = async (event) => {
  event.preventDefault();
  //newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
  try {
    if (newAccount) {
      await createUserWithEmailAndPassword(auth, email, password);
      setNewAccount(false); //⚠️ 에러 발생 지점: 라우터 이동 후 state 변경하기 때문
    } else {
      await signInWithEmailAndPassword(auth, email, password);
    }
  } catch (error) {
    setError(error.message);
  }
};

해결

이미 마운트 해제된 구성 요소에 대해서는 리액트가 state를 업데이트 할 수 없기 때문에
클린업 펑션을 사용하자.

📍 src/routes/Auth.js

//form에 사용하는 이벤트
const onSubmit = async (event) => {
  event.preventDefault();
  //newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
  try {
    if (newAccount) {
      await createUserWithEmailAndPassword(auth, email, password);
      //⚠️ 에러 발생 지점: 라우터이동 후 state 변경하기 때문, 따라서 ✅ 삭제
      //⚠️ setNewAccount(false);
    } else {
      await signInWithEmailAndPassword(auth, email, password);
    }
  } catch (error) {
    setError(error.message);
  }
};

//✅ 해결: 클린업 펑션 넣음
useEffect(() => {
  return () => setNewAccount(false);
}, []);

참고 사이트

https://kyounghwan01.github.io/blog/React/cant-perform-a-React-state-update-on-an-unmounted-component/#%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF-%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3