TIL 2020/09/10

1

interface IProps {
  remainingTime: number
}

const renderTime: React.FC<IProps> = ({ remainingTime }: { remainingTime: number }): JSX.Element => {
    if (remainingTime === 0) {
      return <div className='timer'>Too lale...</div>;
    }

2

const renderTime = (props:{remainingTime:number} ): JSX.Element => {
      if (props.remainingTime === 0) {
        return <div className='timer'>Too lale...</div>;
      }

1:비구조화 할당으로 받기
2:props로 받기

3

클래스형 컴포넌트에서 인터벌을 제거하고자 할때 컴포넌트밖에
전역변수를 설정하고 clearInterval(전역변수)로 인터벌을 제거한다.

 this.state = {
      interval: setInterval(() => {
      this.setState((prev) => ({ remainSeconds: prev.remainSeconds - 1 }));
    }, 1000);
    };

state에 인터벌을 정의해놔도 컴포넌트가 생성됨과 동시에 인터벌에 돌아간다.따라서 원하는 시점에 인터벌을 발생시키고자 할때 메소드 안에서 실행시킨다

onStartRecording = (e: any) => {
    interval1 = setInterval(() => {
      this.setState((prev) => ({ recordingCountdown: prev.recordingCountdown - 1.1 }));
    }, 1000);
/// interval1은 컴포넌트밖에서 정의한 전역변수
    timeout = setTimeout(() => {
      alert('최대 녹음 시간이 만료되었습니다.');
      this.onStopRecording();
    }, maxDuration);
  };