[React] moment 활용해서 보여지게 설정하기

 

1. moment 사용하기

사용하기 위해선 moment를 먼저 install을 해준뒤 import시켜주면 된다.

한국어 or 한국시간으로 표현하기 위해 언어도 같이 import 시켜준다.

npm install moment

===================

import moment from 'moment';
import 'moment/locale/ko';

 

2. react-use를 사용하기

setInterval()를 사용하지 않는 이유

React에서는 state가 변하면 re-rendering 되기 때문에 setInterval()함수는 무한히 실행이 된다. useEffect를 사용해도 제대로 작동하기 않고, 무한루프에 빠지기 때문에 react-use를 사용하여 useInterval를 사용한다.

npm i react-use

================

import { useInterval } from 'react-use';

 

3. useState를 활용하기

state는 boolean값을 활용하여 보여짐을 설정하기 위한 것이다.

const [visible, setVisible] = useState<boolean>(false);

 

4. useInterval() 사용하기

첫번째, state는 초를 체크하기 위한 state를 설정해줬다.

useInterval() 함수가 1초마다 변하는 초를 setSeconds에 담아둔다.

// state
const [seconds, setSeconds] = useState<number>(Date.now());

// useInterval()
useInterval(() => {
	setSeconds(Date.now());
}, 1000);

 

 

5. 함수 작성하기

checkTime이라는 함수를 하나 만들어준다.

- startTime 에는 시작할 날짜

- endTime 에는 끝나는 날짜

- nowTime 에는 현재 날짜가 들어가게 된다.

 

if문을 활용하여 조건마다 visible이 달라질 수 있게 설정한다.

- 이때, moment에서 제공하는 isAfter를 사용할 수 있다. (moment에는 다양한 기능을 제공하니까 나중에 더 알아보면 좋겠다.)

- 현재 날짜보다 시작날짜가 작거나 같으면 false

- 현재날짜가 끝나는날짜보다 전이거나, 현재날짜가 끝나는 날짜보다 크거나 같을때 true

- 나머지 경우에는 false로 셋팅한다.

const checkTime = () => {
  const startTime = moment(new Date('2022-05-25T00:00'));
  const endTime = moment(new Date('2022-05-30T00:00'));
  const nowTime = moment(new Date(seconds));

  if (startTime <= nowTime) {
    setVisible(false);
    if (nowTime.isAfter(endTime) || endTime <= nowTime) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  } else {
    setVisible(true);
  }
};

 

 

6. 함수 실행하기

useEffect()를 사용하여 함수를 실행시켜준다.

배열에는 useInterval에서 담긴 secends를 활용하여 초가변할때 마다 checkTime함수를 실행시켜준다.

useEffect(() => {
  checkTime();
}, [seconds]);

 

7. visible 활용하기

visible state를 활용하여 보여지게 설정하면 된다.

// 삼항연산자 사용
// 삼항연자자를 활용하여 true값, false값일때 보여지는걸 설정할 수 있다.
{visible ? <div>보여진다.</div> : <div>안보인다.</div>}

// && 연산자 사용
// false일 경우 아무것보 보여지지 않을때 &&연산자를 활용하여
// true값일때만 보여지게 설정할 수 있다.
{visible && <div>보여준다!</div>}

 

8. 전체 코드

이렇게 하면 의도한대로 움직이긴 하지만, 맞는 코드인지는 잘 모르겠다.

import React, { useEffect, useState } from 'react';
import { useInterval } from 'react-use';
import moment from 'moment';
import 'moment/locale/ko';

const test = () => {
  const [visible, setVisible] = useState<boolean>(false);
  const [seconds, setSeconds] = useState<number>(Date.now());

  const checkTime = () => {
    const beforeTime = moment(new Date('2022-05-30T00:00'));
    const startTime = moment(new Date('2022-06-07T00:00'));
    const nowTime = moment(new Date(seconds));

    if (beforeTime <= nowTime) {
      setVisible(false);
      if (nowTime.isAfter(startTime) || startTime <= nowTime) {
        setVisible(true);
      } else {
        setVisible(false);
      }
    } else {
      setVisible(true);
    }
  };

  useInterval(() => {
    setSeconds(Date.now());
  }, 1000);

  useEffect(() => {
    checkTime();
  }, [seconds]);

  return (
    <>
      {visible ? <div>보여진다.</div> : <div>안보인다.</div>}
      {visible && <div>보여준다!</div>}
    </>
  );
};

export default test;