이제 타이머가
'도전 시작' 버튼을 누르면 작동되어야 합니다
그러기 위해서는 함수가 필요한데
handleStart (시작 관리)라는 이름이 적당해 보입니다
여기에 타이머를 설정하고
타이머는 자바스크립트 내에서
내장 setTimeout 함수를 사용해 설정할 수 있습니다
이것으로 타이머를 설정할 수 있고 예를 들어 1,000 밀리초를
설정하면 타이머가 끝난 뒤에 이 함수가
실행됩니다
이건 자바스크립트에 내장된 기능이며, 리액트에서만 가능한 것이 아닙니다
이제 여기 있는 시간은 밀리초 단위로
targetTime에 기반하여 설정해야 합니다
하지만 targetTime은 초 단위입니다
그래서 그걸 1000으로 곱해서 밀리초로 변환할 수 있습니다
그리고 타이머가 끝났다는 걸 알려주는
상태도 필요합니다
그러기 위해서 물론 useState 훅을 사용하겠습니다
리액트에서 import되어야 하고
초기에는 false입니다
왜냐하면 이름은 timerExpired (타이머 종료)로 지을 거고
setTimerExpired라는 상태 업데이트 함수도 있습니다
물론 목적은
이 setTimeOut 함수에서 setTimerExpired를 true로 설정하는 것입니다
그래서 이 코드에 다다랐을 때
이 함수가 실행된다면
플레이어는 패배한 것입니다
왜냐하면 플레이어가 멈추기 전에 타이머가 종료되었기 때문입니다
이제 이 상태를
예를 들어 조건적으로 p 요소를 출력하는 데 사용합니다
timerExpired가 true인지 확인해서 말입니다
그리고 true라면, p 요소를 출력합니다
'졌습니다' 같은 문구가 써있을 것입니다
이게 제가 원하는 최후의 해결책은 아닙니다
하지만 게임이 끝났는지 아닌지에 대한 상황을
알기 위해서 지금으로써는 충분합니다
이제 물론 handleStart도
이 버튼과 연결되어야 합니다
여기서, 클릭되면 이런 식으로 handleStart를 실행하고 싶습니다
그럼 이걸 저장하고 재로딩한 다음, 버튼을 클릭해보면
아무것도 바뀌지 않지만, 1초 뒤에 '졌습니다' 라는 문구가 보입니다
당연히 지금은
어쩔 수 없습니다
그래서 두 번째 상태를 추가할 것인데
이것도 처음엔 false이고
타이머가 시작됐는지에 따라 저장됩니다
timerStarted (타이머 시작됨)과 setTimerStarted을 이름으로 하고
이걸 타이머를 설정하기 바로 직전에 true로 설정해줍니다
안에다가 하면 이미 타이머가 끝났을 시점이니 안 됩니다 ,
그러니 바로 직전에 setTimerStarted를 true로 설정해줍니다
아니면 바로 다음에 설정해도 됩니다
바로 다음에 설정하는 것도 괜찮은 이유는
타이머가 끝난 시점이 아니라, 설정된 바로 이후에 실행될 것이기 때문입니다
이 안에 있는 코드들만 타이머가 끝났을 때
실행되는 코드들입니다
이 코드는 타이머가 설정되고 바로 실행될 것이며
이 두번째 상태와 함께 실행됩니다
이제 UI를 업데이트해서 타이머가 실행 중이라는 정보를
반영할 수 있습니다
예를 들어, 여기에서
'도전 시작'이라고 항상 띄워놓는 대신 timerStarted가 true인지 확인해서
true일 때 '중지' 문구를 띄우고 싶습니다
시작 문구 대신에 말입니다
이런 식으로요
여기서 active css 클래스를 조건적으로 추가하고 싶습니다
timerStarted가 true한지 확인하고
true일 경우 active를 클래스로 추가하고
아닐 경우, 아무것도 추가하지 않습니다
그래서 클래스 이름을 undefined (정의되지 않음)으로 짓겠습니다
그리고 여기에서 timerStarted가 true인지 확인하고
true가 맞으면 '타이머가 실행 중입니다'를 출력하고 싶습니다
아닐 경우, '타이머 비활성화'를 출력하고 싶습니다
그러므로 UI는 타이머가 실행 중이냐 아니냐에 따라
업데이트되는 것입니다
그걸 가지고 저장한 다음, '도전 시작'을 클릭하면
UI가 업데이트되지만 아직
이 도전을 멈출 방법은 없습니다
그래서 여기에 또 다른 함수가 필요합니다
handleStop (멈추기 관리)가 적절한 이름 같습니다
이걸 가지고 이 타이머를 멈추고 싶습니다
하지만 여기서 드는 의문은 이제 어떻게
이 함수 내 타이머에 접근을 하냐는 것입니다
그리고 그건 참조의 도움이 필요한 부분입니다