[React] sessionStorage 사용하기

 

React logo image

 

 

React 프로젝트의 검색 기능에 보완 해야할 부분이 있다는 것을 알게 되었다. 

검색 후 페이지 새로고침을 하거나, 검색 결과 상세 페이지 이동 후 다시 검색 페이지로 돌아오면 검색 결과가 사라져 있다..

그렇게 큰 문제는 아니지만, 한번 인식하니까 계속 신경이 쓰여서 이 부분에 대해 공부도 할겸 해결 방법을 찾아 보게 되었다. 

방법을 찾던 중에 sessionStorage에 대해 알게 되었고 문제를 해결할 수 있었다! 🥳🥳

 

 

이 글에서 정리하는 내용:

1. web storage object?

2. sessionStorage와 localStorage의 차이점

3. React에서 sessionStorage 사용하기

 

 

web storage object?

Web storage, sometimes known as DOM storage (Document Object Model storage), provides web apps with methods and protocols for storing client-side data. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information sent in the HTTP request header. 
(출처: Wikipedia, https://en.wikipedia.org/wiki/Web_storage)

 

위키피디아의 설명에 따르면, 웹 스토리지는 클라이언트 쪽에 데이터를 저장할 수 있게 해주는 방법을 제공하는 역할을 한다고 한다.

쿠키와 비슷한 역할을 하지만, 쿠키보다 저장 용량이 크고 HTTP request header에 information을 보내지 않는다는 차이점이 있다. 

(웹 스토리지는 HTML5에서 추가된 것이라고 한다.)

 

따라서 web storage object는 웹 스토리지 데이터를 객체의 형태로 저장한 것으로, key-value 저장소라고 생각할 수 있다.

MDN 문서에서는 웹 스토리지가 브라우저에서 키-값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다고 설명하고 있다.

 

 

sessionStorage와 localStorage의 차이점

웹 스토리지에는 sessionStorage와 localStorage 두 가지 종류가 있다.

각각의 웹 스토리지를 사용하면 페이지를 새로고침해도 데이터는 계속 저장되어 있지만, 그 데이터가 유지되는 기간에서 차이가 있다.

 

• sessionStorage

sessionStorage는 페이지 세션이 유지되는 동안(브라우저 또는 탭이 열려있는 동안)만 데이터를 저장한다.

같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성한다고 한다.

 

• localStorage

localStorage는 브라우저를 종료해도 데이터가 저장된다.

JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 저장된 데이터가 사라진다고 한다.

 

 

React에서 sessionStorage 사용하기

내 React 프로젝트에서는 현재 검색어를 브라우저가 종료 되어도 저장하고 있을 필요는 없기 때문에 sessionStorage를 사용하였다.

 

따라서 기존의 프로젝트에 다음 코드를 추가해 주었다.

// sessionStorage에 저장된 search 값을 가져옴
const sessionSearch = window.sessionStorage.getItem("search");

// search input 값이 바뀔때마다 상태 관리
const [ search, setSearch ] = useState(sessionSearch || "");

// search 값이 바뀔 때마다 sessionStorage의 값도 변경하기
useEffect(() => {
    window.sessionStorage.setItem("search", search);
}, [search]);

window.sessionStorage로 sessionStorage를 호출하면 데이터를 설정, 검색 및 제거할 수 있는 Storage 객체의 인스턴스가 생성된다.

• 키에 해당하는 값 받아오기: .getItem(key)
• 키-값 쌍을 보관하기: .setItem(key, value)

(localStorage에서도 사용 방법과 메서드는 똑같다.) 

(+ 더 많은 메서드는 이 페이지 참고)

 

전체적인 로직을 설명하자면, sessionSearch값이 존재하면 그 값을 search의 초기값으로 설정해서 데이터를 받아 오게 되고, 만약 없다면 search의 초기값은 ""(empty string)이 된다.

따라서 이전에 검색어를 입력한 이력이 있다면, 컴포넌트가 렌더링 될때 마지막으로 저장된 검색 결과를 불러오게 된다.

그리고 input의 value 값이 변경될때마다 search 값도 변경되고, 그러면 sessionStorage의 값도 변경되어 저장 된다.

 

 

이렇게 코드를 추가해주고 테스트 하니까 페이지를 새로고침하거나 뒤로가기로 다시 돌아와도 검색 결과가 그대로 남아있다! 

생각보다 사용방법은 간단한 것 같고, 조금만 더 응용하면 더 많은 기능을 만들 수 있을 것 같다. 😊

 

 

---

참고:

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

https://gisastudy.tistory.com/63