quiz

src/App.js

 import React from 'react';
-import logo from './logo.svg';
+// import logo from './logo.svg';
 import './App.css';
 
 function App() {
@@ -11,4 +11,5 @@ function App() {
   );
 }
 
+
 export default App;

src/Quiz.js

+import React from 'react';
+// import logo from './logo.svg';
+// import './App.css';
+
+
+const question = [
+  { Q: "당신의 성별은?", A: "" },
+  { Q: "당신의 이름은?", A: "" },
+  { Q: "당신의 점수는?", A: "" }
+]
+
+class Quiz extends React.Component {
+  constructor(props) {
+    super(props)
+    this.setAnswer = this.setAnswer.bind(this)
+    this.setQuestion = this.setQuestion.bind(this)
+    this.state = {...question[0], i:0, v:""}
+  }
+  setQuestion() {
+    this.setState({...question[this.state.i+1], i:this.state.i+1, v:""})
+  }
+  setAnswer(e) {
+    question[this.state.i]["A"] = e.target.value
+    this.setState({v:e.target.value})
+    console.log(this.state)
+    console.log(question)
+  }
+  render() {
+    return (
+      <div>
+        <h2>Q:{this.state.Q}</h2>
+        <div>
+          <input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
+        </div>
+        <button type="button" onClick={this.setQuestion}>다음 문제로</button>
+      </div>
+    )
+  }
+}
+
+export default Quiz;

src/index.js

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import Quiz from './Quiz';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Quiz />
   </React.StrictMode>,
   document.getElementById('root')
 );