$$config title: react 퀴즈 만들기 keywords: - react $$ # react로 퀴즈만들어보기 ```js import React, {useState} from 'react'; function Quiz(){ const [quiz,setQuiz] = useState("퀴즈를 푸실려면 버튼을 눌러주세요"); const [answer,setAnswer] = useState(""); const onAnswer = (e) =>{ setAnswer(e.target.value); } const changeQuestion = () =>{ setQuiz("나는 네발로 걸어다니구 내가 어렸을땐 사람들이 엄창나게 좋아하지 그리고 나는 움직이는걸 잡고 노는걸 좋아해 ") } const checkCollect=()=>{ if(answer === "고양이"){ alert("정답입니다"); } else{ alert("오답 입니다."); } }; return (

{quiz}

정답 :

) } export default Quiz; ``` # react로 퀴즈만들어 보기 (score부분은 미완) - `useRef`를 사용해서 드디어 아래에 텍스트가 추가되게 변경하였고 - 추가로 `score`를 추가해서 정답을 맞추면 +1씩 늘어나고 틀리면 -1씩 줄어드는 텍스트를 만들 것이다. ```js import React, {useRef, useState} from 'react'; function Quiz(){ const [quiz,setQuiz] = useState("퀴즈를 푸실려면 버튼을 눌러주세요"); const [quiz2,setQuiz2] = useState("문제 2번!") const [answer,setAnswer] = useState(""); const [answer2,setAnswer2] = useState(""); const [correct, setCorrect] = useState(false); const result = useRef(); const result2 = useRef(); const result3 = useRef(); const [score, setScore] = useState(0); const onAnswer = (e) =>{ setAnswer(e.target.value); } const onAnswer2 = (e) =>{ setAnswer2(e.target.value); } const changeQuestion = () =>{ setQuiz("나는 네발로 걸어다니구 내가 어렸을땐 사람들이 엄창나게 좋아하지 그리고 나는 움직이는걸 잡고 노는걸 좋아해 잠도 많이 자지만 난 생각보다 많이 놀아줘야해! ") } const changeQuestion2 = () =>{ setQuiz2("위의 정답의 친구한테 이걸 주면 엄청 좋아해! 아주 미친다구!"); } const checkCollect = () =>{ if(answer === "고양이"){ result.current.innerText="정답입니다."; setCorrect(true); } else{ result.current.innerText="오답입니다"; } } const checkCollect2 = () =>{ if(answer2 === "캣잎"){ result2.current.innerText="정답입니다."; setCorrect(true); } else{ result2.current.innerText="오답입니다"; } } let add; const scoerPoint= (answer)=>{ switch(answer || answer2){ case "고양이": add =+ (score+1); result3.current.innerNumber=add; result3(true); break; case "캣잎": add =+ (score+1); result3.current.innerNumber=add; result3(true); break; default: add =+ (score-1); result3.current.innerNumber=add; result3(false); } } return (

{quiz}

정답 :

{quiz2}

정답 :

{add}점

) } export default Quiz; ```