(hydration)window is not defined

문제 상황


const JustTestPage = () => {
  console.log(window);

  return <div>JustTestPage</div>;
};

export default JustTestPage;

next.js의 SSR 때문에 초기 서버에서는 window가 undefined이다

해결 방법


import { useEffect } from "react";

const JustTestPage = () => {
  if (typeof window !== "undefined") console.log(window);

  useEffect(() => {
    console.log(window);
  }, []);
  return <div>JustTestPage</div>;
};

export default JustTestPage;

typeof window ! == ‘undefined’로 검사하면 클라이언트 시점의 로직이 된다

useEffect로 마운트 이후에 로직을 실행시킬 수 있다

추가+)


const [mounted, setMounted] = useState(false);

useEffect(() => setMounted(true), []);
if (!mounted) return null;
return (
	```code```
)

마운트를 검사하는 상태값을 추가하여 마운트가 안됐을때는 null을 return한다.