[React.js] 오늘의 디버깅

1️⃣ UseEffect 안에 JSX

 

🤔 문제

UseEffect return 문 안에 JSX를 조건문을 이용해서 사용하고 싶었는데... 함수 자체가 돌아가지 않는 문제가 발생했다. 

 

📝 원인

UseEffect에서 return 문은 오직 cleanup()함수를 이용할 때만 쓸 수 있다. 컴포넌트 렌더링을 할 때 아무런 영향을 주지 않는다. 

 

🛠️ 해결

useEffect가 아닌 함수 안 return문에 작성해서 해결했다. 

 

---

2️⃣ 비동기 호출과 UseState() && rendering 과정에서 router.push() 사용

 

🤔 문제

Warning: Cannot update a component (Router) while rendering a different component (RequireAuth). To locate the bad setState() call inside RequireAuth, 이라는 에러문구가 떴다. 메시지를 해석하면 하나의 컴포넌트를 렌더링 하는 동안 다른 컴포넌트를 update를 할 수 없다는 뜻이고, 특히 useState() 함수의 위치가 적절하지 않다는 것을 암시할 수 있다.  

사용자가 로그인이 되면 다른 페이지를 이용할 수 있게 처리하고 싶었다. 그렇지 않으면 계속 로그인 페이지에 머무르게 처리하기 위해서 렌더링 하는 부분에 router.push()를 사용했는데 그게 문제가 됐다.

 

📝 원인

1. onAuthStateChanged 메서드는 비동기적으로 호출되는데 콜백 내부에서 useState()함수를 사용하다보니 렌더링 하는 과정에서 상태 업데이트에 문제가 발생한다.

2. 화면을 렌더링하는 과정에서 router.push()를 이용해서 다른 페이지로 넘겨주려고 하다보니 문제가 발생한다. 

 

🛠️ 해결

1. useState()함수를 하나 더 사용하여 비동기 처리가 다 되고 나서 화면이 렌더링이 될 수 있게 처리했다.

2. useEffect()함수를 활용해서 비동기 처리와 로그인이 되었을때 다음 페이지로 이동할 수 있게 처리했다. 

 

👉 수정 전 코드

export default function RequireAuth({
  children,
}: {
  children: React.ReactNode;
}) {

  const router = useRouter();

  useEffect(() => {
    auth.onAuthStateChanged(user => {
      if (user) {
        router.push("/community");

        return (
            <>
              <Navbar />
              <Tab />
              {children}
              <Footer />
            </>
        )
      } else {
        router.push("/");
        return (
          <>{children}</>
        )
      }
    });
  }, []);

 

👉 수정 후 코드

export default function RequireAuth({
  children,
}: {
  children: React.ReactNode;
}) {

  const router = useRouter();
  const [authenticated, setAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);


  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      if (user) {
        setAuthenticated(true);
      } else {
        setAuthenticated(false);
      }
      setLoading(false);
    });
    
    // unmounted 됐을 때 메모리 누수의 문제가 발생할 수 있으니 cleanup()함수 사용
    return () => {
      unsubscribe();
    }
  }, []);

  useEffect(() => {
    // 로그인이 되지 않았거나 로딩이 안 돼면 계속 로그인 페이지
    if (!loading && !authenticated) {
      router.push("/");
    } else {
    // 성공시 커뮤니티 페이로 이동
      router.push("/community")
    }
  }, [loading, authenticated]);
  
  // 로딩 상태면 Loading Spinner 사용
  if (loading) {
    <LoadingSpinner />
  } else {
    if (authenticated) {
      return (
        <>
          <Navbar />
          <Tab />
          {children}
          <Footer />
        </>
      )
    } else {
      return (
        <>
          {children}
        </>
      )
    }
  }

}