[React] localStorage 사용하기

firebase에 저장된 내용을 매번 불러오는 것 보다 localStorage를 사용하는 것이 더 좋을 것 같아서 localStorage를 이용해봤다.

 

기본적인 사용법

https://joylee-developer.tistory.com/187

[Javascript] localStorage 사용하기

 

 

일단 firebase의 자료와 localStorage의 자료를 어떻게 사용하고 불러올지 flow chart를 만들어보았다.

 

count 는 firebase에 저장되어 있는 자료의 개수를 말한다.

1) firebase 자료의 수를 확인

2) firebase 자료의 수와 localStorage 자료의 수를 비교

두 가지 과정을 거쳐 자료를 화면에 나타낸다.

 

 

1) firebase 자료의 수를 확인

useEffect(() => {
  async function fetchData() {
    // 1) firebase 자료의 수를 확인
 
    const yearString = year.toString();
 
    // firebase의 자료 개수 확인
    const count = await countHappiness(yearString);
    if (count === 0) {
      // 저장된 행복 없는 경우
      // (firebase에 없으면 local에도 없다고 생각함)
      informRef.current.innerHTML = `첫 번째 행복을 적어보세요!`;
      // 더 이상 data를 확인할 필요가 없다
      return; 
    }
 
    // 2) firebase 자료의 수와 localStorage 자료의 수를 비교
  }
  fetchData();
}, [year, thisYear]);

useEffect 안에 async 함수를 만들어 firebase에서 자료를 가져오는 과정을 await으로 사용할 수 있도록 한다.

firebase에 자료가 없으면 굳이 localStorage를 확인할 필요 없다. 바로 안내문을 바꾸고 함수를 return한다.

 

2) firebase 자료의 수와 localStorage 자료의 수를 비교

firebase에 자료가 있는 경우, localStorage에 있는 자료와 개수를 비교한다. 개수가 다르면 서버의 자료로 localStorage에 업데이트하고, 같으면 localStorage에 있는 자료를 그대로 사용한다.

useEffect(() => {
  async function fetchData() {
    // 1) firebase 자료의 수를 확인
    // ...생략됨
 
    // 2) firebase 자료의 수와 localStorage 자료의 수를 비교
 
    // localStorage 저장된 자료 확인
    let localData = JSON.parse(localStorage.getItem(yearString));
   const localDataCount = localData?.length || 0;
 
    if (localDataCount !== count) {
      // localStorage 저장본과 firebase 자료 다른 경우
      // localStorage에 업데이트
      const firebaseData = await getHappiness(yearString);
      localStorage.setItem(
        yearString,
        JSON.stringify(firebaseData.data)
      );
      localData = JSON.parse(localStorage.getItem(yearString));
    }
 
    // 행목 목록 화면에 만들기
    // createList(localData, openContent);
  }
  fetchData();
}, [year, thisYear]);

localDataCount 를 구할 때 사용한 ?.는 선택적연결이라고 하며 앞의 속성이 존재하는지 확인한 후 그 다음 속성에 접근하는 기호이다. 아래의 페이지에서 두 번째 항목에서 확인할 수 있다.

https://joylee-developer.tistory.com/166

[Javascript] Javascript에서 ?(물음표) 사용법