[Next.js] ReferenceError: localStorage is not defined

이진혁·2023년 1월 24일

이슈

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

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

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

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

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

import { useEffect } from "react";

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

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

개발 === 99%의 노력과 1%의 기도