이제 질문들을 표시하고
답안을 등록할 수 있게 되었습니다
또한 답안들이 항상 같은 순서가 아니고
즉 첫 번째 답변이 늘 올바른 답이 아니도록
순서를 섞어야 하고
그리고 문제를 다 풀고 난 뒤에
앱이 에러와 함께 충돌을 일으키는 것을 방지해야 합니다
그 대신 요약 화면을 띄워야 합니다
먼저 답안 순서를 섞는 작업부터 시작하겠습니다
Quiz.jsx (퀴즈 파일)로 돌아와서
suffledAnswers 상수를 추가하겠습니다
여기서 새로운 배열을 만들어서
선택된 질문의 답변을 여기
이 배열에 펼치겠습니다
이 QUESTIONS[activeQuestionIndex].answers
여기 이 데이터를 여기 있는 배열로 펼칩니다
그렇게 하고 나면 shuffledAnswers를 사용할 수 있습니다
그리고 내장된 sort 메소드를 불러오겠습니다
sort는 새로운 배열을 반환하는 것이 아니라
이 배열을 수정합니다
바로 여기 있는 불러온 shuffledAnswers 배열입니다
그게 바로 여기에 새 배열을 생성하는 이유입니다
그렇게 해서 원본 답변 배열을 수정하지 않도록 합니다
이 순서 그대로 유지하려는 이유는
첫 번째 답변이 항상
올바른 답변이라는 것을 알기 때문입니다
이렇게 해야 올바른 답변이 선택된 것인지 여부를
동적으로 확인할 수 있습니다
그래서 해당 배열을 수정하는 대신
새로운 배열을 수정해야 하므로
이렇게 복사본을 만드는 것입니다
그리고 나서 sort를 불러오겠습니다
sort를 사용하기 위해서는
호출하려는 해당 배열로부터
항상 두 개의 요소를 받는 함수가 필요합니다
그리고 만일 여기에 음수의 값을 반환하면
이 요소들이 뒤바뀌고
양수를 반환한다면
원래의 순서대로 유지될 것입니다
즉 sort는 여기 있는 배열 안의
각 요소 쌍을 확인하여 새로운 순서로 파생시킵니다
이제 여기에 있는 입력값은 신경쓰지 않아도 됩니다
이 순서를 섞어야 하기 때문입니다
math.randon() - 0.5를 불러와서
만들어낼 수 있습니다
Math.random은 우리에게 0과 1의 사이의
값을 주게되고, 1은 제외입니다
만일 0.5를 뺀다면
100가지 경우의 수 중에서 50개가 음수이게 됩니다
또는 50개가 양수가 되는데
즉 답변들을 섞게 될겁니다
여기에 내보내려는 것은
기본 답변이 아닌
순서가 섞인 답변입니다
새로고침을 실행하면 그 객관식 답변들의 배열이
새로고침할 때마다 다른 것을 볼 수 있습니다
이렇게 첫 번째 단계가 끝났습니다
이 부분 작업은 아직 완전히 끝난 것이 아닙니다
나중에 살짝 바꿔줘야 할 부분이 있습니다
그래도 핵심 로직은 올바르게 잘 설정되었습니다
수정을 하기 전에 일단
이 앱과 퀴즈가 충돌을 일으키지 않도록 해야합니다
지금처럼 있는 문제를 모두 소진하면 충돌하게 되는데
이 충돌하는 것을 방지하기 위해서는
퀴즈가 끝났는지를 확인해야 합니다
그리고 그것은 또한 다른 계산된 값으로 볼 수 있습니다
왜냐하면 만일 질문이 존재하는 수 만큼
답변을 등록하면 퀴즈는 끝날 것이기 때문입니다
그래서, 새로운 계산된값을 추가할 겁니다
여기에 quizisComplete라는
새로운 상수를 추가해줍니다
만약 activeQuestionIndex가 QUESTIONS.length와
같다면 True를 반환합니다
아니라면 False입니다
이 확인과정 통해 가지고 있는 질문 양을
넘어서지 않도록 해야 합니다
이제, 몇 가지 다른 요소들을 표시할 필요가 있습니다
만일 퀴즈가 끝났다면 여기 퀴즈 요소들 대신에 표시해야 하는데
만약 모든 질문을 사용했다면
여기에 if check를 넣을 겁니다
그리고 quizIsComplete를 확인하겠습니다
이 경우는 디브를 반환하는데
summary라는 ID를 가진 디브입니다
그리고 그 안에 h2 요소를 내보낼 수 있고
거기에 '퀴즈 종료'를 넣겠습니다
그 위에 이미지도 몇 개 넣을텐데
이미지들은 이 파일 내에 가져오겠습니다
여기에 quiz-complete.png 파일을 가져오겠습니다
quizCompleteImage로 설정해서
import from을 하고 한 층위 위로 올라갑니다
asset을 입력하고, quiz-complete.png를 넣어줍니다
그리고 여기 아래 image에
src (소스)로서 출력하겠습니다
대체 텍스트로는 '트로피 아이콘'이라고 작성해서
이미지의 내용을 묘사하겠습니다
저장 후 새로고침을 하겠습니다
질문들에 답변을 하고
모든 질문들을 완료했는데 또다시 충돌합니다
이렇게 되는 이유는 바로
일단 quizIsComplete 확인을 했고
다른 컴포넌트를 내보내도록 했지만
그걸 하기 전에
여기 quizIsComplete 값을 생성하기도 전에
무작위로 섞은 답변을 얻기 위해
activeQuestionIndex에 접근을 하려고 하기 때문입니다
퀴즈가 완료되었을 때 오류를 일으키는 이유는
모든 질문에 답을 해버렸기 때문이고
여기의 이 로직은
퀴즈가 완료 된 경우 반환하는 이 if 구획의
뒤에 와야 하는 것입니다
그래야만 이 코드가 아직 표시할 문제가
남아 있을 때만 실행될 수 있습니다
이렇게 변경을 하고 새로고침을 하면
모든 질문을 다 답변하고
질문들 끝에 '퀴즈 종료' 화면이
잘 보이게 됩니다
이번 시간에는 이 로직을 추가해 보았습니다