이슈

만족도 평가를 완료한 유저의 경우 만족도 평가 모달이 다시 뜨지 않도록 평가가 완료되면 localstorage에 isReviewed 라는 키값으로 true를 저장하는 로직을 작성하였다.

이후 페이지가 렌더링 될 때 localstorage에 있는 isReviewed를 가져와 만약 true라면 모달을 띄우지 않는 로직을 작성하였는데 위와 같이 ReferenceError가 발생.

원인

Next.js에서 제공하는 Server Side Rendering(SSR)에서는 window, document 같은 브라우저 전역 객체를 사용할 수 없기 때문.

따라서 우리는 페이지가 client가 로드되고 window 객체가 정의될 때까지 localStorage에 접근할 수 없다.

사실 조금만 생각해보면 당연히 에러가 날 상황인데 CSR에 익숙해서 그런지 에러를 만나버리고 말았다,,! ^,^

해결 방안

useEffect 사용

import { useEffect } from "react";

useEffect(() => {
  const isReviewed = localStorage.getItem('isReviewed')
}, [])

useEffect는 컴포넌트가 모두 렌더링 된 이후 실행하기 때문에 useEffect 안에 localstorage와 관련된 로직을 작성하면 안전하게 접근이 가능하다!

참고
https://github.com/vercel/next.js/discussions/19911
https://velog.io/@qhflrnfl4324/%EB%82%91%EA%B9%A1%ED%8C%9C08-js-cookie