React-Quiz 만들기 [5]

1. 여러 퀴즈를 렌더링 하기위해 각 순서에 따라 id 값을 주었다.

const quizzes = 
[
  {
    id:1,
    question: "나는 몇 학년일까요?",
    answers: 
    [
      {text: "1학년", isCorrect: false},
      {text: "2학년", isCorrect: false},
      {text: "3학년", isCorrect: false},
      {text: "4학년", isCorrect: true},
    ],
  },
 
  {
    id:2,
    question: "나는 몇 살일까요?",
    answers: 
    [
      {text: "21살", isCorrect:false },
      {text: "22살", isCorrect:false },
      {text: "23살", isCorrect:false },
      {text: "24살", isCorrect:true },
    ],
  },
  
 ...
 

2. currentNo 변수로 버튼을 클릭할 때마다 +1 되어 다음 문제로 넘어간다.

state 사용 - 컴포넌트 안에서 관리하는 변수

: state가 변경되면 state가 속한 컴포넌트가 다시 렌더링된다. state 사용하기 위해 useState 함수를 사용한다.

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

const [currentNo , setCurrentNo] = useState(0); // 페이지 넘기기 state
...
 const handleClick = (isCorrect) => {
    if(isCorrect){
      alert("정답!");
      setScore(score => score+1);
    }
    else{
      alert("오답입니다.");
    }
    setCurrentNo((currentNo) => currentNo + 1);
  };
...
<div className = "question-section">
      <h1 className="question-header">
        <span>{quizzes[currentNo].id}</span>/{quizzes.length}
      </h1>
        <div className="question-text">{quizzes[currentNo].question}</div>
      </div>
      <div className="answer-section">
        {quizzes[currentNo].answers.map((answer)=>(
          <button 
            value={answer.text} 
            onClick={() => handleClick(answer.isCorrect)}
            >
            {answer.text}
          </button>
...

 

3. 최종 결과 - 점수 표시하기

function App(){
  const [currentNo , setCurrentNo] = useState(0); // 페이지 넘기기 state
  const [showResult, setShowResult] = useState(false); // 퀴즈 끝 페이지 State
  const [score, setScore] = useState(0); // 퀴즈 점수 표시
  
  const convertedScore = Math.floor((score/quizzes.length)*100); //점수 계산
 
  const handleClick = (isCorrect) => {
    if(isCorrect){
      alert("정답!");
      setScore(score => score+1);
    }
    else{
      alert("오답입니다.");
    }
    // 마지막 퀴즈인지 체크
    if(currentNo===quizzes.length - 1){
      setShowResult(true); // setShowResult : false -> ture
    }else{
      setCurrentNo((currentNo) => currentNo + 1);
    }
  };
  
  return<div className="container">
    {showResult ? (
      <div className="app">
        <h1 className="result-header">총 점수는</h1>
        <p className="result-score">{convertedScore}</p>
      </div>
    ):(
 
....

 

 

 

최종 소스

import React, { useState } from "react";
import "./App.css";
 
const quizzes = 
[
  {
    id:1,
    question: "나는 몇 학년일까요?",
    answers: 
    [
      {text: "1학년", isCorrect: false},
      {text: "2학년", isCorrect: false},
      {text: "3학년", isCorrect: false},
      {text: "4학년", isCorrect: true},
    ],
  },
 
  {
    id:2,
    question: "나는 몇 살일까요?",
    answers: 
    [
      {text: "21살", isCorrect:false },
      {text: "22살", isCorrect:false },
      {text: "23살", isCorrect:false },
      {text: "24살", isCorrect:true },
    ],
  },
 
  {
    id:3,
    question: "나는 어디에 살까요?",
    answers: 
    [
      {text: "수원", isCorrect:false },
      {text: "대구", isCorrect:false },
      {text: "서울", isCorrect:true },
      {text: "부산", isCorrect:false },
    ],
  }
]
 
function App(){
  const [currentNo , setCurrentNo] = useState(0); // 페이지 넘기기 state
  const [showResult, setShowResult] = useState(false); // 퀴즈 끝 페이지 State
  const [score, setScore] = useState(0); // 퀴즈 점수 표시
  
  const convertedScore = Math.floor((score/quizzes.length)*100); //점수 계산
 
  const handleClick = (isCorrect) => {
    if(isCorrect){
      alert("정답!");
      setScore(score => score+1);
    }
    else{
      alert("오답입니다.");
    }
    // 마지막 퀴즈인지 체크
    if(currentNo===quizzes.length - 1){
      setShowResult(true); // setShowResult : false -> ture
    }else{
      setCurrentNo((currentNo) => currentNo + 1);
    }
  };
  
  return<div className="container">
    {showResult ? (
      <div className="app">
        <h1 className="result-header">총 점수는</h1>
        <p className="result-score">{convertedScore}</p>
      </div>
    ):(
      <div className = "app">
    <div className="black-nav">
      <div>Quiz</div>
    </div>
 
    <div className = "question-section">
      <h1 className="question-header">
        <span>{quizzes[currentNo].id}</span>/{quizzes.length}
      </h1>
        <div className="question-text">{quizzes[currentNo].question}</div>
      </div>
      <div className="answer-section">
        {quizzes[currentNo].answers.map((answer)=>(
          <button 
            value={answer.text} 
            onClick={() => handleClick(answer.isCorrect)}
            >
            {answer.text}
          </button>
        ))}
      </div>
    </div>
    )}
 </div>
}
 
export default App;