React-Quiz 만들기 [3]

App.js 코드

import React from "react";
import "./App.css";
 
function App(){
  const handleClick = (e) => {
    console.log(e.target);
    //console.log(e.target.value);
  };
 
  return (
  <div className = "container">
    <div className = "app">
    <div className="black-nav">
      <div>Quiz</div>
    </div>
    <div className = "question-section">
      <h1 className="question-header">
        <span>1</span>/4
      </h1>
        <div className="question-text">
          몇 학년 이신가요?
        </div>
      </div>
      <div className="question-section">
        <button onClick={handleClick} value="1학년">1학년</button>
        <button onClick={handleClick} value="2학년">2학년</button>
        <button onClick={handleClick} value="3학년">3학년</button>
        <button onClick={handleClick} value="4학년">4학년</button>
      </div>
    </div>
  </div>
  );
}
 
export default App;
 

 

1. 버튼 클릭 시 로그 출력

클릭 시 이벤트가 제대로 출력되는지 확인하기 위해 handleClick() 함수 실행으로 로그를 발생시켰다.

이벤트 객체 내의 target에 접근하여 클릭한 객체의 값을 가져온다.

function App(){
  const handleClick = (e) => {
    console.log(e.target);
    //console.log(e.target.value);
 };

2. button에 value 값 넣기

이를 이용하여 이벤트를 처리한다.

1

<button onClick={this.handleClick}>

cs

 

App.js 에 있는 button에 이벤트 주입한다.

버튼에 value 값을 넣어 event 객체에서 접근이 가능하도록 한다.

<div className="question-section">
 <button onClick={handleClick} value="1학년">1학년</button>
 <button onClick={handleClick} value="2학년">2학년</button>
 <button onClick={handleClick} value="3학년">3학년</button>
 <button onClick={handleClick} value="4학년">4학년</button>
</div>

 

3. 답 확인하기

function App(){
  const handleClick = (e) => {
    const answer = e.target.value;
    if(answer == "4학년"){
      alert("정답!");
    }
    else{
      alert("오답입니다.");
    }
  };

 

실행해보았다.

정답 확인