Next.js에서 sessionStorage 사용하기

next.js의 클라이언트 컴포넌트에서 세션스토리지를 사용하면 세션스토리지가 정의되어있지 않다는 에러(ReferenceError: sessionStorage is not defined)가 발생한다.

 

사용자의 브라우저에 있는 세션스토리지를 사용하기위해서는 클라이언트측에서 sessionStorage가 사용되도록 해야한다. next.js는 기본적으로 서버측에서 페이지를 만드는 SSR 환경이기때문에 단순히 가져다 사용할경우 에러가 발생한다.

 

이를 해결하기 위해서는 조건부 실행, 클라이언트 사이드 함수 활용 등의 방법이 있다.

 

1. 조건부 실행 (window 객체 검사)

window의 정의여부를 검사하여 현재 코드가 서버에서 실행되고 있는지 클라이언트에서 실행되고 있는지를 알 수 있다.

아래와 같은 코드로 조건부 실행이 가능하다.

    const sessionData = typeof window !== 'undefined' ? sessionStorage.getItem('sessionItem') : null;

상황에 따라 if 조건문도 사용 가능

 

웹페이지를 표시하는 웹브라우저는 window 객체를 기본적으로 제공한다. 이 객체는 localStorage, sessionStorage 등 다양한 웹 API를 포함하고 있는데 이 객체의 정의유무를 검사하면 현재 실행환경이 어떤 환경인지를 구분할 수 있게 된다.

 

초기 SSR 에서는 window 객체가 undefined 이므로 sesssionData 변수는 null로 초기화 된다. 이후 CSR에서 해당 코드가 실행될때 window 객체가 존재하여 sessionStorage를 사용할 수 있게 된다.

 

 

 

2. 클라이언트 사이드 함수 활용 (React Hooks)

리액트의 훅을 활용해도 해당 문제를 간단히 해결할 수 있다. 간단한 예시로 useEffect를 사용해 그 내부에서 sessionStorage를 사용한다면 useEffect는 클라이언트 측에서만 사용가능한 함수이므로 자연스럽게 문제가 해결된다.

useEffect(() => {
	const sessionData = sessionStorage.getItem('sessionItem');
}, []);