Next js sessionstorage is not defined 문제

Next js로 개발을 하던 중 sessiostorage is not defined 에러를 만났다.

나는 sessionStorage의 어떤 값이 업데이트 될떄 시행해야 할 작업이 있었고,

useEffect안에 의존성 배열로 sessionStorage.getItem('...키값..') 이런식으로 사용을 했는데,

 

위와 같은 에러를 만났다.

 

찾아보니 Next js 는 SSR환경이고, 막무가내로 locaoStorage,sessionStorage를 사용하면,

위와 같이 정의되지 않았다라는 에러를 만날 수 있다고 한다!.

 

Next js에서 window객체는 cliend-side를 랜더링 하기 이전에 server-side랜더링을 수행한다!

 

그래서 Next js에서 제공하는 server-side랜더링에서는 

 

window,document와 같은 전역 객체를 사용할 수 없다!

 

그래서 페이지가 cilent에 로드될때까지 sessionStorage에 접근 불가능하다!

---

나는 useEffect의 의존성 배열에 sessionStorage가 들어가야 하는 상황이었고,

typeof window !== 'undefined'

구문을 새로 추가해주었다.

 

 useEffect(() => {
    const newimg = sessionStorage.getItem(user.userimgURL);
    if (typeof newimg === 'string') {
      setImg(newimg);
    }
  }, [
    typeof window !== 'undefined' && sessionStorage.getItem(user.userimgURL),
  ]);