[React] 현재 시간이 특정 시간 사이에 있는지 검사하기

호텔 키오스크 프로그램을 구현하면서
현재 시간이 체크인 시간 ~ 체크아웃 시간 사이에 해당하는 시간인지 확인하는 로직을 구현해야 헀다.

dayjs 라이브러리와 dayjs 라이브러리의 플러그인인 isBetween 으로 쉽게 구현할 수 있다.

설치하기

• dayjs : npm install dayjs --save

사용하기

내 경우에는 체크인 / 체크아웃 시간 데이터를 HH:mm으로 받았다.

아래 코드는 시작시간, 종료시간을 입력받아 현재 시간이 해당 시간 사이에 있는지를 검사하는 메소드인 getIsCheckinTime 메소드를 반환하는 react hook인 useTimeCheck 코드 이다.

import dayjs from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);

const useTimeCheck = () => {
  const getIsCheckinTime = (startTime, endTime) => {
	let today = dayjs().format('YYYY-MM-DD');
    let start = dayjs(`${today} ${startTime}`);
    let end = dayjs(`${today} ${endTime}`);
    
    if (dayjs().isBetween(start, end)) {
		return true;
    } else {
    	return false;
    }
  }
  return {
  	getIsCheckinTime,
  };
}

export default useTimeCheck;

사용할 때는 다음과 같이 사용하면 된다.

const MainPage = () => {
	const { getIsCheckinTime } = useTimeCheck();
    
    const [ isCheckinTime, setIsCheckinTime ] = useState(false);
    
    useEffect(()=>{
    	setIsCheckinTime(getIsCheckinTime('11:00','16:00'));
    }, []);
    
    return ...
}