Local Storage & Session Storage

새로고침을 할 때에도 기존의 state 값이 없어지지 않았으면 좋겠다.

import React, { useState } from 'react';

function Counter() {
	const [count, setCount] = useState(0);
	return <button onClick{(count) => setCount(count + 1)}>{count}</button>;
}

위의 코드는 버튼을 누를 시 count 상태가 계속해서 1씩 증가하는 코드이다. 하지만 새로고침을 누르는 순간 이 count 상태는 초기화되어 다시 0으로 간다.

아니면 나만의 무기 프로젝트에서도 사용자 ID를 입력해서 개인 공부방에 들어왔을 때 새로고침을 누르면 사용자 ID가 초기화되어서 아무것도 보여주지 않는 문제가 있었다. 이 문제는 사용자 ID를 context 내에서 state로 관리했기 때문에 일어나는 일이었다.

이를 막기 위해 사용할 수 있는 방법은 웹 스토리지를 이용하는 방법이다. 웹 스토리지에는 두 가지가 있는데, 로컬 스토리지와 세션 스토리지이다. 이 두 기술 모두 클라이언트 단, 즉 브라우저 상에 데이터를 키-값 형식으로 저장할 수 있는 기술이다.

세션이란?

세션은 서버와 브라우저 간의 통신이 종료되면 사라지므로, 세션이 끝나면 세션 스토리지에 저장된 정보도 지워지게 된다. 하지만 로컬 스토리지의 경우에는 세션이 끝난다 하더라도 그 데이터는 유지될 수 있다.

세션 스토리지를 사용할 때 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장된다. 그리고 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸되게 된다.

로컬 스토리지도 결국 브라우저가 기준이므로, 크롬과 파이어폭스를 동시에 띄웠을 때나 다른 컴퓨터에서 같은 브라우저를 띄운 경우에는 둘의 로컬 스토리지는 다른 로컬 스토리지일 것이다. 만약 다른 기기나 브라우저에서도 데이터 영속성을 추구한다면 DB나 클라우드를 사용해야 한다.

기본적인 함수들

웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

리액트에서의 사용법

키-값 형식으로 데이터를 저장하게 될 것이다. 위에 있는 코드를 다음과 같이 사용할 수 있다.

import React, { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(
    () => JSON.parse(window.localStorage.**getItem**("count")) || 0
  );

  useEffect(() => {
    window.localStorage.**setItem**("count", JSON.stringify(count));
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useState에서 상태의 값을 로컬 스토리지의 “count” 키 값을 가지고 와서 사용할 수 있도록 getItem을 사용한다.

count가 바뀔 때마다 로컬 스토리지의 “count” 키가 가리키고 있는 count 값을 setItem을 이용해 바꿔주고 있다.