vueuse - useLocalStorage 사용법

vue3의 vue use에서 useLocalStorage 사용법이다.

Nov 06, 2023

현재 프로젝트에서 로컬스토리지와 pinia를 병합하여 단점을 보완하며 사용하고 있다.

store를 사용해서 데이터를 관리할 경우 결국 새로고침하면 날라가버리는 이슈가 발생하게 되는데 생각해 보면 그런 상황을 방지하는게 어찌 보면 당연하다. 그래서 방법으로 로컬스토리지를 사용하여 데이터를 유지하는 듯 하다.

그럼? 데이터를 유지하기 위해 로컬 스토리지에 어떻게 데이터를 삽입시키고 유지할까?

우리 프로젝트에서는 vueuse의 useLocalStorage를 사용하고 있었다. 중요한건 나는 초보 개발자이고 진짜 vueuse에 각각의 함수들을 설명해놓은 도큐멘트를 보면 한숨만 나온다…

VueUse

Collection of essential Vue Composition Utilities

https://vueuse.org/core/useLocalStorage/

실제로 이번에도 useLocalStorage 를 확인하며 한숨이 나왔다 위에 도큐멘트를 보면 어딜 어떻게 쓰라는 건지.. 싶어서 내가 한번 찾아보고 정리해보았다.

일단 MDN의 로컬스토리지에 대한 설명이 있는 페이지를 찾아보았다.

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)

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

간단하게 내가 알고 있는 로컬 스토리지에 대한 상식은…

sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage는 페이지를 닫을 때 사라진다는 것?


localStorage.setItem("myCat", "Tom");

로컬 스토리지에 항목을 추가하기 위한 방식은 위와 같고

아래 useLocalStorage의 추가 방식은


declare function useLocalStorage<T>(key: string, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T>;

위 와 같았다. key, initialValue, opions 총 3가지의 파라미터를 가지고 있었다.

useLocalStorage(key, initialValue, options);


(key: string, initialValue: MaybeRefOrGetter<string>, options?: UseStorageOptions<string>)

key (string)= 로컬 스토리지에서 데이터를 저장하고 검색할 때 사용하는 key이다.

→ 데이터를 식별하는데 사용되고 있었다.

initialValue = 초기값이라는 영어의 뜻을 가지고있는 이부분은 로컬스토리지에 데이터를 찾을 수 없을 때 사용하는 초기값으로 보였다.

초기값이 제공되지 않는 경우는 null을 반환하고 있었다.

options : 선택 사항이며 옵션을 추가하고있었다.

serializer : 로컬스토리지에 데이터를 저장하거나 가져올 때 사용되는 직렬화 및 역 직렬화 작업을 정의하는 객체이다. → 우리가 사용한 방식을 확인해보면


/** NC 가공 타입 idx */
const ncWorkItemRid = useLocalStorage<NCWork['itemRid']>(StorageKey.NCWorkItemRid, null, { serializer: StorageSerializers.number });

이렇게 되어있는데 { serializer: StorageSerializers.number } 대충 감을 보면 number를 이용해서 직렬화 하고 있는데… 직렬화가 뭘까…?

컴퓨터 메모리 상에 존재하는 객체(Object) -> 문자열(string) 로 변환하는 것= 직렬화(Serialization)

문자열(string) -> 자바스크립트 객체(Object)로 반환하는 것= 역직렬화(Deserialization) or 파싱(Parsing)


var youn = {
  name : 'youn',
  age : 31,
  gender : 'male',
  location : 'gunpo',
  marriage : false,
  friends : ['oh', 'Lee', 'bee']
}

var serialize_json = JSON.stringify(youn);

console.log("Serialize 결과 타입 : ", typeof serialize_json);
console.log("Serialize 결과 : ", serialize_json);
 
// Serialize 결과 타입 :  string
// Serialize 결과 :   {"name":"youn","age":31,"gender":"male","location":"gunpo","marriage":false,"friends":["oh","Lee","bee"]}

즉 .number 로 만든것을 보면 번호에 관련 된 듯하여 보니 옵션을 붙인 곳은 전부 번호를 붙이는 곳이었다.

target : 저장 대상을 지정하는 객체라고 한다. 기본적으론 localStorage 가 사용되지만 이속성으로 sessionStorage 또는 기타 저장소를 사용할 수 있다고한다.

그럼 위에 내용을 토대로 아래의 코드를 분석하면


const ncWorkProjRid = 
useLocalStorage<NCWork['projRid']>
(StorageKey.NCWorkProjRid, null, { serializer: StorageSerializers.number });

useLocalStorage 함수를 사용하여 ncWorkProjRid 변수를 초기화하였다.

useLocalStorage<NCWork['projRid']>: useLocalStorage 함수를 호출하였고 ncWorkProjRid 변수를 생성한다. 이 변수는 Local Storage에서 NCWork['projRid'] 타입을 같게 된다.

StorageKey.NCWorkProjRid: 이 변수는 Local Storage의 키 역할을 한다.

null : null을 위에 키에 초기값으로 설정한다. 키가 존재하지 않으면 대체 된다.

{ serializer: StorageSerializers.number }: 이것은 useLocalStorage 함수의 옵션 이고serializer를 사용하여 데이터가 Local Storage에 저장될 때와 가져올 때 변환 로직을 태울 수 있다. 여기서는 데이터가 숫자로 직렬화 및 역 직렬화된다.

이렇게 마지막으로 코드 분석 까지 해보았다…

var youn = { name : 'youn', age : 31, gender : 'male', location : 'gunpo', marriage : false, friends : ['oh', 'Lee', 'bee'] } var serialize_json = JSON.stringify(youn); console.log("Serialize 결과 타입 : ", typeof serialize_json); console.log("Serialize 결과 : ", serialize_json); // Serialize 결과 타입 : string // Serialize 결과 : {"name":"youn","age":31,"gender":"male","location":"gunpo","marriage":false,"friends":["oh","Lee","bee"]}