Next.js에서 locastorage.getItem()이 안 되는 이유

export default function bla(){
} 

안 에서 localstorage.getItem()이 작동하지 않았다. 혹시 서버사이드에서 렌더링 돼서? 라고 생각했는데 추측한 대로였다. 해결방법은 다음과 같다

Next.js는 서버 사이드 렌더링을 지원하는 프레임워크이기 때문에, 일반적인 React 애플리케이션과는 다른 동작 방식을 가지고 있습니다. 이러한 차이로 인해 일부 코드 작성 방법에 대한 제약이 생길 수 있습니다.

export default function으로 정의한 컴포넌트는 서버 측에서 렌더링 될 수 있습니다. 서버 측 렌더링 시에는 브라우저의 localStorage와 같은 클라이언트 측의 API를 사용할 수 없기 때문에, localStorage.getItem()과 같은 코드는 에러가 발생할 수 있습니다.

따라서 localStorage.getItem()과 같은 클라이언트 측 API를 사용하려면, Next.js의 useEffect() 훅과 같은 클라이언트 측 API를 사용해야 합니다. useEffect() 훅은 컴포넌트가 렌더링된 이후에 실행되므로, 클라이언트 측에서 localStorage와 같은 API를 사용할 수 있습니다.

따라서, export default function 안에 localStorage.getItem()과 같은 클라이언트 측 API를 사용하려면 useEffect() 훅 안에 넣어서 사용해야 합니다. 예를 들어 다음과 같이 사용할 수 있습니다.

하지만, useEffect() 훅은 컴포넌트가 렌더링될 때마다 실행되기 때문에, 성능 문제가 발생할 수 있습니다.

따라서 useEffect() 훅 대신 다른 방법을 사용할 수도 있습니다. 예를 들어, 다음과 같이 useState() 훅과 useMemo() 훅을 사용하여 클라이언트 측 API를 사용할 수 있습니다

# UseEffect

import { useEffect, useState } from 'react';

export default function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const storedData = localStorage.getItem('data');
    setData(storedData);
  }, []);

  return (
    <div>
      {data ? <p>{data}</p> : <p>No data found</p>}
    </div>
  );
}

# UseMemo

import { useState, useMemo } from 'react';

export default function MyComponent() {
  const [data, setData] = useState(null);

  const storedData = useMemo(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem('data');
    } else {
      return null;
    }
  }, []);

  if (!data && storedData) {
    setData(storedData);
  }

  return (
    <div>
      {data ? <p>{data}</p> : <p>No data found</p>}
    </div>
  );
}