re-render의 개념, localStorage.setItem(key,value), useEffect(()=>{},dependencies?)

local/sessionStorage: web storage object

localStorage.setItem(key,value)해주면, React.useEffect(()=>{...},localStorage.getItem(key))로 수정감지 가능함 

useEffect(setup, dependencies?)에서 dependencies?는 state, props뿐 아니라 관련된 모든 variables와 functions 사용가능 (출처:https://react.dev/reference/react/useEffect)

local storage는 domain,protocol,port로 정의되는 origin에 묶여있음

origin(domain/port/protocol)만 같다면 url 경로는 달라도 동일한 결과, localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.

sessionStorage는 origin + 동일 tab내에서만 유효

storage 이벤트

localStorage나 sessionStorage의 데이터가 갱신될 때, storage 이벤트가 실행됩니다. storage 이벤트는 다음과 같은 프로퍼티를 지원합니다.

• key – 변경된 데이터의 키(.clear()를 호출했다면 null)
• oldValue – 이전 값(키가 새롭게 추가되었다면 null)
• newValue – 새로운 값(키가 삭제되었다면 null)
• url – 갱신이 일어난 문서의 url
• storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체

여기서 중요한 점은 storage 이벤트가 이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 일어난다는 사실입니다.

좀 더 구체적으로 설명을 이어나가 보겠습니다.

두 개의 창에 같은 사이트를 띄워놨다고 가정해봅시다. 창은 다르지만 localStorage는 서로 공유됩니다.

실제 본 페이지를 두 개의 브라우저 창에 띄워 봅시다.

두 창에서 모두 storage 이벤트를 수신하고 있기 때문에 한 창에서 아래 예시를 실행해 데이터를 갱신하면 다른 창에 해당 사항이 반영되는 것을 확인할 수 있습니다.

 

 

// 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
window.onstorage = event => { // window.addEventListener('storage', () => {와 같습니다.
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
};

localStorage.setItem('now', Date.now());

storage 이벤트의 또 다른 중요한 특징은 event.url이 있어 데이터가 갱신된 문서의 URL을 알 수 있다는 점입니다.

또한 event.storageArea에는 스토리지 객체가 포함되어 있는데, storage 이벤트는 sessionStorage나 localStorage가 변경될 때 모두 발생하기 때문에 event.storageArea는 스토리지 종류에 상관없이 실제 수정이 일어난 것을 참조한다는 것 역시 중요한 특징입니다. 변경이 일어났을 때 우리는 event.storageArea에 무언가를 설정해 '응답’이 가능하도록 할 수 있죠.

출처: https://ko.javascript.info/localstorage