.

src/Admin.js

@@ -25,7 +25,7 @@ function Admin() {
         // console.log(dbRef.current, indexRef.current)
 
         if(dbRef.current[e.target.id-1]){
-            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)  //설명 부탇드립니다.
         }
         else{
             dbRef.current[e.target.id-1] = {'Q':'x', 'Choose':[0,0,0,0], 'A':'x'}
@@ -38,14 +38,14 @@ function Admin() {
             <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
         )
         setQuizBtnCount(QuizBtnCount + 1)
-    }
+    } //퀴즈 추가버튼
 
     function handleClickSave(QnAadmin) {
         console.log(QnAadmin, indexRef.current)
         dbRef.current[indexRef.current] = QnAadmin
         localStorage.setItem('QnA', JSON.stringify(dbRef.current))
 
-    }
+    } //설명 부탁드립니다.
     return (
         <>
  <div className="container-fluid bg-light">

src/AdminQuiz.js

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 let list = []
-
-let QnAadmins = []
 let QnAadmin = {}
 let savechoose = {}
 
 function AdminQuiz(props) {
+
     const [question, setQuestion] = useState(props.data.Q)
-    // setQuestion(props.data.Q)
-    // question = props.data.Q
     const [choose, setChoose] = useState(props.data.Choose)
-    // setChoose(props.data.Choose)
-    // choose = props.data.Choose
     const [answer, setAnswer] = useState(props.data.A)
-    // setAnswer(props.data.A)
-    // answer = props.data.A
     const [selectOption, setselectOption] = useState(1)
 
+    // props.quizNum가 바뀔때마다 즉, Admin.js에서 퀴즈버튼을 바꿔누를때마다 useEffect가 발생하여 값을 업데이트 시켜줍니다.
+    useEffect(() => {
+        setQuestion(props.data.Q)
+        setChoose(props.data.Choose)
+        setAnswer(props.data.A)
+    },[props.quizNum])
 
-    // 만약 업데이트가 되었으면 question이랑 props.data.Q랑 값이 같아야 하는데 
-    // admin페이지 가서 quiz 1에 값들 넣은 다음 콘솔찍어보고 quiz 2에도 값을 넣고 콘솔보면 어떤게 다른지 알 수 있을거야
-    // 마지막으로 quiz3 눌러보면 확실하게 알 수 있을거고 값이 처음만 업데이트되고 나중에는 업데이트가 안되고있어
-    console.log(question) 
-    console.log(props.data.Q)
-    console.log(choose)
-    console.log(props.data.Choose)
-    console.log(answer)
-    console.log(props.data.A)
 
     const handleChangeQuestion = (event) => {
         QnAadmin['Q'] = event.target.value
         setQuestion(event.target.value)
     }
+
     const handleChangeChoose = (event) => {
         savechoose[event.target.id] = event.target.value
         setChoose(event.target.value)
     }
+
     const handleChangeanswer = (event) => {
         QnAadmin['A'] = event.target.value
         setAnswer(event.target.value)
@@ -68,57 +60,49 @@ function AdminQuiz(props) {
             alert('정답이 입력되지 않았습니다.')
         }
         else {
-            // console.log(QnAadmin)
             QnAadmin['Choose'] = Object.values(savechoose)
-            QnAadmin['N'] = String(props.QuizNum)
-            QnAadmins.push(QnAadmin)
+            QnAadmin['N'] = String(props.quizNum)
+            props.fn(QnAadmin)
             QnAadmin = {}
-            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
-            // console.log(QnAadmins)
             alert('입력이 완료되었습니다.')
         }
 
     }
 
-    // function handleChangeQuestion(){}
-
-
     return (
-        <>
-            <div className="" id="Quiz1">
-                <h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2>
-                <div className="p-3 borber">
-                    <div className="p-3 ">
-                        <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
-                        <input type="text" id="inputQuiz" className="form-control" onChange={handleChangeQuestion} value={question} placeholder={'문제를 입력하세요'} ></input>
-                    </div>
+        <div className="" id="Quiz1">
+            <h2 className="p-3 border text-center bg-white">{String(props.quizNum)}번 문제만들기</h2>
+            <div className="p-3 borber">
+                <div className="p-3 ">
+                    <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
+                    <input type="text" id="inputQuiz" className="form-control" value={question} onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
+                </div>
+                <div className="p-3 ">
+                    <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
                     <div className="p-3 ">
-                        <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
-                        <div className="p-3 ">
-                            <div className="input-group">
-                                <div className="input-group-prepend">
-                                    <div className="input-group-text">
-                                        <input type="radio" checked={false} name="answer" />
-                                    </div>
+                        <div className="input-group">
+                            <div className="input-group-prepend">
+                                <div className="input-group-text">
+                                    <input type="radio" checked={false} name="answer" />
                                 </div>
-                                <input type="text" className="form-control" id='1' value={choose} placeholder={'1번 보기를 입력하세요'} onChange={handleChangeChoose} />
                             </div>
-                            {list.map((element) => element)}
-                            <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
+                            <input type="text" className="form-control" id='1' value={choose} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
                         </div>
+                        {list.map((element) => element)}
+                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
                     </div>
+                </div>
 
-                    <div className="p-3 ">
-                        <span className="font-weight-bold mr-2 h3">정답:</span>
-                        <input type="text" onChange={handleChangeanswer} value={answer} placeholder={'정답를 입력하세요'} />
-                    </div>
-
-                    <label for="inputLogin" className="d-flex justify-content-center">
-                        <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
-                    </label>
+                <div className="p-3 ">
+                    <span className="font-weight-bold mr-2 h3">정답:</span>
+                    <input type="text" value={answer} onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
                 </div>
+
+                <label for="inputLogin" className="d-flex justify-content-center">
+                    <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
+                </label>
             </div>
-        </>
+        </div>
     )
 }