React(66) react-cookie 로 1회성 모달 만들기

 

 

가끔 웹사이트를 들어가면 1회성 이벤트 팝업이 뜰때가 있다. [ 하루동안 보지않기 / 앞으로 보지않기 ] 등의 옵션도 있다.

이런 팝업은 time range 를  쿠키값을 설정해서 손쉽게 만들 수 있다.

그럼 함께 만들어보자

 

---

 

React(66) 쿠키를 사용해 페이지 진입시 모달창 한 번만 뜨게 만들기

 

react-cookie 라이브러리를 사용해서,

[모달창 닫기] 를 클릭하면 hideModal() 함수가 실행되며 

10년 후에 expires 되는 쿠키 값을 주어 당분간(10년동안?) 보이지 않게 하자 

 

 

일단 기본세팅해주자. 임포트도 해주고, 쿠키값을 담을 변수를 만들어주자.

import { useCookies } from 'react-cookie'; 	// 리액트 쿠-키 임포트 해오고
import moment from 'moment';			// moment 라이브러리 임포트 해오고

 

const COOKIE_KEY = 'saebalHideModal'; 	               // 쿠키이름세팅 
const [cookies, setCookie] = useCookies([COOKIE_KEY]); // 쿠키이름을 초기값으로 넣어 쿠키세팅

 

 

그 다음으로 함수 hideModal() 을 정의해주자. 이걸로 쿠키값을 통해 모달을 보이지 않게 할 것이다.

const hideModal = () => {
    const decade = moment(); 	 	// 일단 moment 로 시간변수를 만들어주고
    decade.add(3650, 'd'); 	 	// 10년뒤로 값을 add 해준다.
    setCookie(COOKIE_KEY, 'true', {	// 쿠키를 셋해준다.
      path: '/',			// path를 지정해주고
      expires: decade.toDate(),		// 여기서 날짜를 지정해준다
    });
};

 

 

위에서 선언한 cookie 값 (saebalModalHide) 없을 때만 보여주자

{cookies[COOKIE_KEY] ? null : ( // 쿠키값이 있으면 null (즉, 모달닫기를 눌렀으면,)
  <div className="modal">	// 쿠키값이 없으면 모달이 나온다
    모달입니다. 
    <a className="modal-close" onClick={setHidden}>
      <CloseIcon />
    </a>
  </div>
)}

 

결과화면 

화면에 진입하자마자 모달창이 뜨고 모달닫기를 누르면

 

[크롬 개발자도구] - [application탭] - [cookies]에서 확인해보면 

함수가 호출되며 쿠키값이 설정된다.