[ReactJS] React를 활용한 카운트 다운(3,2,1) 구현

출처: https://kr.123rf.com/

ReactJS를 활용한 Count Down(3 2 1) 로직 구현

---

개요

  프로젝트 진행 중, React Hook을 이해하여 프로젝트에 필요한  카운트 다운(3,2,1) 로직의 구현을 복습해본다.

 

목차

• useState를 활용한 변수 선언
• useEffect를 활용한 로직 구현
• html 화면 전환
• 동작 화면

 

소개

 1.  useState를 활용한 변수 선언 

 

useState를 활용한 변수 선언

 

const [time, setTime] = useState(5);

 

카운트 다운이 진행되어 숫자가 줄어들 때마다, 페이지를 리렌더링 시켜 숫자를 노출시켜주기 위해, React Hook인 useState를 활용하여 변수를 선언한다.

 

 2. useEffect를 활용한 로직 구현 

 

setTimeout 및 time값 갱신 함수를 활용한 로직

 

useEffect(() => {
    time > 0 && setTimeout(() => setTime(time - 1), 1000);
}, [time]);

 

time변수의 값이 0보다 크면, setTimeout 함수를 통해 setTime 함수를 동작시켜, time의 값을 1초마다 -1씩 감소시킨다.

이때, time이 0이 되면 setTimeout은 동작하지 않게 되고, 카운트 다운이 종료된다.

 

 3. html 화면 전환 

 

return (
	<>
	{time ? 
		time : <div>카운트 다운 종료</div>
	}
	</>
)

 

time이 0보다 큰 경우에는 time의 숫자 값이 노출되지만, 0이 됨과 동시에 화면이 리렌더링 되어 전환된 화면을 통해 '카운트 다운 종료' 가 노츨됨을 알 수 있다.

 

 4. 동작 화면 

See the Pen Untitled by 이성준 (@castlejun-2) on CodePen.