반응형
가끔 웹사이트를 들어가면 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]에서 확인해보면
함수가 호출되며 쿠키값이 설정된다.
반응형
'React' 카테고리의 다른 글
React - package.json 과 package-lock.json 이란 (0) | 2022.05.03 |
---|---|
React(67) react-cookie 로 저장된 쿠키값 가져오기 (0) | 2022.04.17 |
React (65) 게시글 더보기 토글 버튼 만들기 (0) | 2022.03.21 |
React(64) React-color 컬러피커 라이브러리 사용하기 (0) | 2022.03.13 |
React - Input 실행오류 A component is changing an uncontrolled input to be controlled. (0) | 2022.03.06 |
댓글