[에러] ReferenceError: localStorage is not defined

wna_6uoar·2024년 3월 27일

Next.js 프로젝트에서 빌드를 했더니 다음과 같이 에러가 떴다.

localStorage의 userType을 가져와 분기처리를 할 일이 있었는데 그 때 localStorage에서 값을 가져오면서 에러가 발생한 듯 보였다.

에러가 발생한 이유

  • Next.js는 client-side를 렌더하기 전 server-side 렌더를 수행
  • Next.js에서 제공하는 SSR에서는 window, document 와 같은 브라우저 전역 객체 사용 불가능
  • window 객체는 client-side에만 존재
  • 결과적으로, 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근 불가!

해결 방법

1. typeof window !== 'undefined' 사용

  • 페이지가 client에 마운트될 때까지 기다렸다가 localStorage에 접근
  • window 객체가 참조되지 않을 경우, undefined를 반환
  • localStorage에 접근하기 전, localStorage가 정의
  const localboxCreatorType =
    typeof window !== 'undefined'
      ? localStorage.getItem('localboxCreatorType')
      : null;

// 혹은 
if (typeof window !== 'undefined') {
  const localboxCreatorType = localStorage.getItem('localboxCreatorType');
}

2. useEffect 사용

  • useEffect는 렌더링 시 실행되므로, 초기 서버 빌드 시 useEffect 내부 코드는 실행 x
  • useEffect는 client-side에서만 실행되므로 localStorage에 안전하게 접근 가능
import { useEffect } from "react";

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

참고

profile
천방지축 어리둥절 빙글빙글 돌아가는 감자의 하루

0개의 댓글