[errorLog] ReferenceError: localStorage is not defined at Component (Next.js 14)

🚨 발생한 문제와 상황

header.tsx 컴포넌트에서 유저의 로그인 상태를 파악해 유저 정보를 로컬스토리지에 저장하고, 해당 값을 JSON.parse()로 가져오는 도중 에러가 발생했다. 

아래는 문제가 발생한 부분이다. 

// header.tsx
const userCheck = () => {
    onAuthStateChanged(auth, async (user) => {
      if (user) {
        const uid = user.uid
        const q = query(collection(db, 'user'), where('uid', '==', uid))
        const querySnapshot = await getDocs(q)
        const data = querySnapshot.docs.map((doc) => doc.data())[0]

        if (!localStorage.getItem('currentUser')) {
          localStorage.setItem('currentUser', JSON.stringify(data))
        }
      } else {
        // User is signed out
        localStorage.removeItem('currentUser')
        router.push('/login')
      }
    })
  }

  const currentUser = localStorage.getItem('currentUser')
  const currentData: UserInfo | null = currentUser // 여기에서 에러!
    ? JSON.parse(currentUser)
    : null

 

🤔 문제의 원인 파악하기

처음에는 왜 문제가 발생하는지 이해할 수 없었다. header 컴포넌트는 use client를 사용한 클라이언트 컴포넌트였고, currentUser가 null일 경우에도 생각해서 조건문을 할당해 주었으니까. 심지어 페이지에서 동작하는데에 문제는 없었다. 하지만 콘솔에는 에러가 찍혀있었다. 

 

그래도 문제를 주의깊이 생각해보고 찾아본 결과 문제는 Next.js의 렌더링 순서 때문이라는 사실을 알게 되었다. 

Next.js는 client side를 렌더링 하기 전 server side를 렌더링하고 Next.js에서 제공하는 서버 사이드 렌더링(SSR)에서는 window나 document 같은 브라우저 전역 객체를 사용할 수 없다. 그리고 window 객체는 client side에만 존재한다. 

즉, 페이지가 client에 로드 되고 window 객체가 정의될때까지 localstorage에 접근할 수 없기때문에 로컬스토리지가 정의되지 않았다는 에러가 발생하는것이다. 

 

🏃‍♀️ 시도해본 방법

typeof window !== 'undefined'

조건문을 통해 window가 정의되었을때를 판단하고, 조건이 일치할때 로컬 스토리지에 접근한다. 

if (typeof window !== 'undefined') {
  // Perform localStorage action
  const item = localStorage.getItem('key');
}

 

useEffect

useEffect는 렌더링시에 실행되기때문에 서버에서 렌더링 될때는 내부의 코드가 실행되지 않는다. 즉, useEffect로 감싸주면 해당 내용은 클라이언트 렌더링 실행시에 사용되기때문에 로컬 스토리지에 안전하게 접근 가능하다.

import { useEffect } from "react";

useEffect(() => {
  // Perform localStorage action
  const item = localStorage.getItem('key')
}, [])

 

✅ 결론

 let currentData: UserInfo | null = null // let으로 바깥에서 변수 선언해주고 

// window가 참조되었을때 로컬스토리지에서 값 가져와서 변수에 재할당해줌으로 해결!
  if (typeof window !== 'undefined') { 
    const currentUser = localStorage.getItem('currentUser')
    currentData = currentUser ? JSON.parse(currentUser) : null
  }

 

 

 

 

 

 

 

레퍼런스

 

https://github.com/vercel/next.js/discussions/19911

https://velog.io/@qhflrnfl4324/%EB%82%91%EA%B9%A1%ED%8C%9C08-js-cookie