이제 이 퀴즈 앱이
느리지만 차근차근 모양을 잡아가고 있습니다
이제 질문들에 답변을 할 수 있고
정답을 골랐는지 오답을 골랐는지 볼 수 있고
그리고 시간이 얼마나 남았는지 알려주는
잘 만들어진 타이머도 가졌습니다
이제 문제가 하나 있습니다
만약 조금 늦게 답변을 고르면
여기 위에 있는 타이머가 정답을 골랐는지
오답을 고른건지에 대해 알기도 전에 만료됩니다
너무 빠르게 넘어가는 것 같습니다
그리고 여기서 보셨다시피
몇 가지 문제점이 더 있는데
바로 동시에 다수의 타이머가 돌고 있다는 겁니다
우리가 답변을 선택할 때
여기 Question 컴포넌트에 또한
타이머를 설정하는데
사실 여기 두 개의 타이머를 설정하고 있습니다
그리고 정답인지 오답인지 표시한 후에
이 내부 타이머가 만료되면
부모 컴포넌트에 대한 selectedAnswer를 전달하고
여기선 이 부모 컴포넌트는 Quiz 컴포넌트입니다
그러나 이는 답변이 정답인지 오답인지를
확인하기 전에 타이머가 만료되고
이는 부모 컴포넌트로 전달됩니다
그리고 타이머가 만료되기에 다른 질문으로 교체됩니다
그리고 다시
이제 실제 selectedAnswer가
부모 컴포넌트로 전달되었기 때문에
Quiz 컴포넌트에서
이 두 개의 다른 상황을 겪게 되는 겁니다
즉 selectedAnswer를 보관했기 때문에
다른 질문으로 넘어가는 겁니다
다음 질문으로 넘어가고
답변을 보관하는 방식 중 하나는
타이머가 만료되어서 답변이 건너뛰어졌을 경우입니다
그리고 또 다른 방식은 답변이 선택되어서
사용자로부터 답변을 얻었을 경우입니다
그리고 이제 이 두 가지는 답변을 너무 늦게 선택하면 일어납니다
그래서 이 문제를 회피하기 위해서 해야 하는 일은
이 Question 컴포넌트에서 사용자가 답변을 선택 시
이 타이머를 업데이트하는 것입니다
즉 새로운 타이머가 시작이 되면
사용자에게 정답 또는 오답을 보여준 다음에만
만료되도록 작업하는 것입니다
그리고 만약 타이머가 만료된다면
Quiz 컴포넌트에 질문이 답변되지 않았다는 것을
알리지 않아야 합니다
이렇게 되지 않도록 작업하겠습니다
답이 선택되었을 때 타이머를 여기에 업데이트하기 위해
여기 Question 컴포넌트에
새로운 계산된값을 추가합니다
timer라고 이름을 지을 수 있습니다
그리고 이는 10,000밀리초여야 합니다
아니면 얼마든 각 질문에 설정한 시간의 기본 최대값입니다
그리고 이는 Question 컴포넌트가 렌더링될 때
하나의 가능한 값이어야 합니다
그러나 해당 컴포넌트가 다시 렌더링될 때
답변이 선택되었기 때문에, 그 해당값을 변경해야 합니다
그래서 이것을 변수로 설정할 겁니다
그리고 특정 조건에 따라 변경하겠습니다
여기에 있는 이 answerState에
selectedAnswer이 True라면
그래서 답변을 골랐다면
타이머를 1000밀리초로 정하겠습니다
왜냐하면 1000밀리초 후에
정답이나 오답을 보여줘야 하기 때문입니다
그 후에 if answer isCorrect를 널과 동일하지 않다고 설정합니다
그래서 만약 정답인지 오답인지에 대한 정보를 가졌다면,
타이머를 2000밀리초로 설정하겠습니다
왜냐하면 그게 다음 질문으로 넘어가는데
걸리는 시간이기 때문입니다
그리고 당연하게도 1000과 2000
아래에 타이머를 위해 설정 해둔값과 같습니다
그렇게 하고 저 계산된 타이머 값을
사용 할 수 있어야 합니다
Questiontimer에 있는 timeout 속성을 위해 사용하는값입니다
그러고 나서, 해당 타이머 questionTimer 컴포넌트 안에
타이머가 변할 때마다
새로운 interval과 timeout이 시작될 것이고
진행 과정은 상황에 따라 업데이트 될 겁니다
왜냐하면 timeout은 속성으로서
받아 들여지고 여기 timeout에 의존성으로 사용되기 때문입니다
이제 추가적으로, mode 속성을
여기 QuestionTimer 컴포넌트에 받아들이겠습니다
여기 이 mode 속성의 양식을
className으로서 설정하기 위함입니다
인덱스 파일(Index.css)에서
answered를 mode로서 설정하면
진행 표시줄은 다른 색깔을 받게 됩니다
이것을 사용해서 무언가가 변경됐다고
유저들에게 보여주고 싶은 것입니다
그래서, QuestionTimer의 이 Question 컴포넌트에서
이 mode 속성을 answerState에 설정합니다
정답 혹은 오답에 대해 알려주는 내용이기 때문입니다
이렇게 해서 저장을 하고 다시 불러오면
답변을 선택하면
색이 바뀌는 것을 볼 수 있지만, 아직도
몇 가지 문제가 있습니다
예를 들어, 다른 문제로
바꾸는 과정에서
진행 표시줄의 색이 바뀌지만
진행 표시줄이 업데이트 되지 않는다는 것을 볼 수 있습니다
그래서 여기에 문제점이 있는 것 같습니다
그리고 문제점 하나는 timeout이 변경될 때 마다
interval을 초기화하지 않는 점입니다
그러므로 이 interval은
진행 표시줄의 새로운 타이머나 새로운 최대값과
같은 선상에 있지 않습니다
이를 고치는 가장 쉬운 방식은
QuestionTimer에 키를 다시 추가하는 겁니다
그리고 이것을 timer에 동등하게 설정되도록
그리고 timer값을 바꿀 때
QuestionTimer 컴포넌트를 삭제하고 다시 재성성합니다
그리고 interval이 재성성되도록 만듭니다
이제 다른 문제점은
이후에 건너 뛴 질문이 있습니다
그리고 이는 타이머가 그 안에서 만료될 때마다 발생하는 일입니다
거기서 이 타이머가 만료될 때마다
여기 여전히 이 skipAnswer 함수를 작동시킵니다
그러나 이 함수는 답변으로 아무것도 정해지지 않았을 때
작동시켜야 합니다
그러므로, 여기 Question 컴포넌트 안에서
아래쪽으로 가서
선택된 답변이 새로운 텅 빈 문자열에 동등하게 합니다
즉 아무 답도 선택되지 않았다는 것을 의미합니다
이는 onTimeout의값이
OnskipAnswer에 있어야 합니다
그게 아니면 널값을 가져야 합니다
onTimeout에는 값을 원하지 않습니다
왜냐하면 이 경우에 아무 함수도 실행하고 싶지 않기 때문입니다
이제 저장하고 불려오면
질문을 기록할 수 있고 만료되는 타이머를 더 얻었습니다
그리고 다음 질문으로 넘어갑니다
그리고 이젠 예상치 못한 질문은을 건너뛰고 있습니다
그리고 이제 문제점들을 다 해결했으니
잘 작동하는 Question 컴포넌트를 얻었습니다
이제 다음 질문으로 더 나아갈 수 있으며 skip, questions는
질문의 답변이 정해졌을 때 정답인지 오답인지
사용자가 피드백을 받을 수 있습니다
그렇기에 다음 단계는 모든 질문들을
다 풀어서 더 질문이 없으면
요약 화면을 업데이트 하는 것이었습니다
또는 마지막 부분에 요약 화면을 보여주는 것입니다
결과를 요약하는 내용을 담고
사용자가 퀴즈를 잘 봤는지에 대해
알려주는 화면입니다
다음 시간에 이 부분을 다루겠습니다