[TIL] 2022-01-18 (input tag properties, arrow function)

 

 

 

▷ input tag properties

import React, { useState } from "react";



function Problem(props) {


  return <div>
  <p>{props.text}</p>
  <input id={props.id} name={props.number} />
  </div>;
}

const GradingForm = (event) => {
  const [score, setScore] = useState(0)
  
  const answer1 = "아닌 밤중에 홍두깨";
  const answer2 = "세살 버릇이 여든까지 간다";
  
  const handleSubmit = (event) => {
    event.preventDefault();
    let totalscore = 0
    if (event.target.answer_one.value === answer1) totalscore += 50
    if (event.target.answer_two.value === answer2) totalscore += 50
    setScore(totalscore)
    event.target.answer_one.value=null
    event.target.answer_two.value=null
    
  }

  return <form onSubmit={handleSubmit}>
      <div id="problem_one">
        <Problem number="1" id="answer_one" name="answer_one" text="예기하지 못한 말을 불쑥 꺼내거나 뜻밖의 일을 갑자기 당하는 경우를 이르는 말은?" />
        
        
      </div>
      <div id="problem_two">
        <Problem number="2" id="answer_two" name="answer_two" text="어릴 때의 버릇은 늙어서도 고치기 어렵다는 뜻을 가진 말은?"/>
        
        
      </div>
      <button id="check" type="submit">채점</button>
  
      <h2 id="grade">{score}점</h2>
    </form>
}

function App() {
  return (
    <div className="App">
        <GradingForm />
    </div>
  );
}

export default App;

• input에 입력된 값을 받아오기 위해서는 event.target.name.value 
• button을 form과 연계하기 위해서는 button의 type을 'submit'으로 설정해야 함

 

 

 

▷ arrow function

- 중괄호를 사용하지 않는 경우

let add = n => n + 2
// return 에 대한 명시가 없지만, 결과를 return 함
// let add = function(n) { return n + 2 }와 거의 동일함

let sayHi = () => alert('안녕')
// 인수가 없을 때 괄호를 비워둘 수 있지만, 이 때 괄호는 생략할 수 없음

- 중괄호를 사용하는 경우

let sum = (a, b) => {
  let result = a + b;
  return result;
};
// 본문이 여러줄로 구성되었다면 중괄호를 사용해야 함
// 이 경우는 return 지시자를 사용해 명시적으로 결괏값을 반환해주어야 함

 

 

 

 

 

[Reference]

1. https://ko.javascript.info/arrow-functions-basics