React 로컬 스토리지를 이용하여 하루 동안 보이지 않기 구현하기

세션 스토리지, 로컬 스토리지, 쿠키 등 웹 브라우저 저장소를 이용하여 다양한 정보를 저장하고 그에 따른 UI를 구현할 수 있다.

세션 스토리지는 해당 세션이 종료될 경우에는 기록이 사라지므로, 다음 세션에서도 팝업이 보이지 않도록 기억하게 만들고 싶어서 로컬 스토리지를 이용해서 구현했다.

로컬 스토리지를 이용하여 하루 동안 보이지 않기 구현하기

 

today = new Date();
console.log(today.getDate());

// 1491553506653 와 같은 13자리 수를 반환

getTime() 메소드를 적용할 경우 해당 메소드가 실행된 바로 그 시간을 13자리로 표현한 수가 반환된다. 나열된 시간은 millisecond 즉 1/1000 초를 나타낸다. 이를 이용하여 숫자를 비교해서 boolean 값을 반환하여 팝업을 보여주고 사라지게 만들 수 있다.

import { useEffect, useState } from "react";

export default function Popup() {
  const [isPopupShow, setPopupShow] = useState(true);

  const closePopup = (expireDays) => {
    let expire = new Date();
    expire.setTime(expire.getTime() + (expireDays * 24 * 60 * 60 * 1000));
    localStorage.setItem("popupNoShow", expire.getTime());
  }
  
  const checkPopupClose = () => {
    const expireDay = localStorage.getItem("popupNoShow");
    let today = new Date();
  
    if(today.getTime() > expireDay) { // 이렇게 하면 localStorage에 아무것도 저장되어 있지 않을 경우 undefined 거나 null 이므로 true를 반환한다.
      return false;
    } else {
      return true;
    }
  }

  const closePopupToday = () => {
    closePopup(1); // 하루 동안 표시 안 할 것임을 명시
    setPopupShow(false); // 오늘 하루 안 보기 누름과 동시에 팝업 사라짐
  };

  useEffect(() => {
    checkPopupClose() ? setPopupShow(false) : setPopupShow(true);
    // 최초 컴포넌트가 마운트되었을 때, 팝업을 표시할 지 말지 조회
  }, []);

  return (
    <>
    {isPopupShow && (
      <>
        <div className="popup">
          <div className='popup-close-wrap'>
            <div className='popup-noshow'
              onClick={closePopupToday}>
              <input type='checkbox' id='check' />
              <label htmlFor='check'>오늘 하루 안 보기</label>
            </div>
            <div className='popup-close'
              onClick={() => setPopupShow(false)}>
              <span>닫기</span>
            </div>
          </div>
        </div>
      </>
      )}
    </>
  )
}