[React] 기한까지 보이도록 설정하기 (feat:day.js)

dayjs 를 사용해서 지난 번에는 남은 시간 타이머 구현을 해보았다. 이번에는 기한안에 따른 함수를 실행시킬 예정이다.

 

case1: 시작 날짜, 종료날짜 정하기 - 기한에 맞게 실행

기한을 설정하고 오늘 날짜가 기간 안에 해당할 경우에는 페이지가 보여지도록 설정하려고 한다.

그냥 날짜를 아래와 같이 직접 코드에 쳐도 되지만,

  const startDate = dayjs('2023-09-04');
  const endDate = dayjs('2023-10-01');

 

개발환경에서와 실제 배포에서 날짜가 자동 변경되도록 하기 위해 아래와 같이 env에 작성하였다.

(production의 경우에는 날짜만 다르게 env에서 작성해주면 된다.)

09-04 부터 10-01 까지 해당 기한일 경우 보여지도록 할 예정이다.

REACT_APP_START_DATE=2023-09-04
REACT_APP_END_DATE=2023-10-01

 

isBetween : 시작, 종료날짜 사이에 있을 경우

import dayjs from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';

 //day
  const [isBetweenDateHidden, setIsBetweenDateHidden] = useState(false);
  
  const envStartDate = process.env.REACT_APP_START_DATE;
  const envEndDate = process.env.REACT_APP_END_DATE;
  const currentDate = dayjs(); //현재 날짜
  const startDate = dayjs(envStartDate); //시작날짜
  const endDate = dayjs(envEndDate); //종료날짜
  //기간사이 true판별
  dayjs.extend(isBetween);
  const isBetweenDateRange = currentDate.isBetween(
    startDate,
    endDate,
    'day',
    '[]' 
  ); 
  //day:세번째 인수에는 시간 단위를 지정
  //네번째 인수:날짜포함여부>> [ : 시작날짜포함,]:종료날짜 포함
  
  useEffect(() => {
    if (isBetweenDateRange) {
      setIsBetweenDateHidden(false);
    } else {
      setIsBetweenDateHidden(true); //true면 hidden되도록 설정
    }
  }, [isBetweenDateHidden, currentDate, isBetweenDateRange]);

 

위와 같이 설정 후, 해당 컴포넌트의 상위 클래스에 state에 따른 className을 부여하여 display가 none되도록 하였다.

 

참고사이트)

day.js 사용 방법 - JavaScript 날짜 라이브러리

 

---

case2: 종료날짜 정하기 - 기한에 맞게 실행 

 

현재 날짜가 종료날짜 전이면 보여지게 할 경우에는 시작날짜를 딱 정하지 않아도 되니, 이 방법을 사용할 수 있다.

10-09까지는 새창이 띄워지고, 10-10이 된 순간부터는 마감 alert이 띄워지게 할 예정이다.

REACT_APP_TARGET_DATE=2023-10-10T00:00:00

 

* isBefore : 종료날짜 전일 경우

import dayjs from 'dayjs';

..

const envTargetDate = process.env.REACT_APP_TARGET_DATE;
const currentDate = dayjs(); //현재 날짜
const targetDate = dayjs(envTargetDate); //종료날짜

//종료날짜 전일 경우 실행된다.
if (currentDate.isBefore(targetDate)) {
  window.open('./contest');
} else {
  alert('마감되었습니다.');
}