update

src/Admin.js

@@ -11,7 +11,6 @@ function Admin() {
     const indexRef = useRef(0)
     const dbRef = useRef([])
 
-
     useEffect(() => {
         if (JSON.parse(localStorage.getItem('QnA'))) {
             dbRef.current=JSON.parse(localStorage.getItem('QnA'))
@@ -24,9 +23,15 @@ function Admin() {
 
     function handleClickQuiz(e) {
         indexRef.current = Number(e.target.id) - 1
-        console.log(dbRef.current, indexRef.current)
-        setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id]} />)
+        // 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]} />)
+        }
+        else{
+            dbRef.current[e.target.id-1] = {'Q':'x', 'Choose':[0,0,0,0], 'A':'x'}
+            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+        }
     }
 
     function handleClickAddQuiz() {

src/AdminQuiz.js

-import React, { useState} from 'react';
+import React, { useState, useEffect } from 'react';
 
 let list = []
 let QnAadmin = {}
@@ -7,16 +7,17 @@ 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])
+
 
     const handleChangeQuestion = (event) => {
         QnAadmin['Q'] = event.target.value
@@ -41,7 +42,7 @@ function AdminQuiz(props) {
                         <input type="radio" checked={false} name="answer" />
                     </div>
                 </div>
-                <input type="text" class="form-control" id={String(selectOption + 1)} value={choose[selectOption]} placeholder={(selectOption + 1) + '번 보기를 입력하세요'} onChange={handleChangeChoose} />              
+                <input type="text" class="form-control" id={String(selectOption + 1)} value={choose[selectOption]} placeholder={(selectOption + 1) + '번 보기를 입력하세요'} onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
@@ -79,17 +80,17 @@ function AdminQuiz(props) {
                 <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 className="input-group">
+                            <div className="input-group-prepend">
+                                <div className="input-group-text">
+                                    <input type="radio" checked={false} name="answer" />
+                                </div>
                             </div>
+                            <input type="text" className="form-control" id='1' value={choose} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
                         </div>
-                        <input type="text" className="form-control" id='1' value={choose} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
+                        {list.map((element) => element)}
+                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
                     </div>
-                    {list.map((element) => element)}
-                    <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
-                </div>
                 </div>
 
                 <div className="p-3 ">