[React] 초급 퀴즈4 - 이벤트 핸들링과 폼

리액트에서 이벤트 핸들링과 폼(Form) 관리에 대한 개념을 학습하는 퀴즈입니다. 아래 문제를 풀어보세요!

---

 

 

🧩 1. 리액트에서 이벤트 핸들러를 설정할 때 올바른 방식은?

1. onclick="handleClick()"
2. onClick={handleClick}
3. onClick="handleClick"
4. onClick="handleClick()"

---

 

 

🧩 2. 아래 코드에서 버튼을 클릭하면 콘솔에 어떤 값이 출력될까요?

function Button() {
  function handleClick() {
    console.log("버튼이 클릭되었습니다!");
  }

  return <button onClick={handleClick}>클릭</button>;
}

1. 아무것도 출력되지 않는다.
2. "버튼이 클릭되었습니다!"가 콘솔에 출력된다.
3. 오류가 발생한다.
4. undefined가 출력된다.

---

 

 

🧩 3. 리액트에서 폼을 관리하는 방법 중 올바른 것은?

1. HTML의 기본 폼 제출 기능을 그대로 사용한다.
2. useState를 사용하여 입력 값을 상태로 관리한다.
3. document.getElementById를 사용하여 값을 가져온다.
4. setTimeout을 이용하여 입력 값을 저장한다.

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

🏆 정답 및 해설

✅ 1번 문제 정답: 2번 (onClick={handleClick})

📌 해설: 리액트에서는 이벤트 핸들러를 중괄호 {} 안에 함수 형태로 전달해야 합니다. 문자열로 전달하면 작동하지 않습니다.

function Button() {
  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }

  return <button onClick={handleClick}>클릭</button>;
}

---

✅ 2번 문제 정답: 2번 ("버튼이 클릭되었습니다!"가 콘솔에 출력된다.)

📌 해설: handleClick 함수가 버튼 클릭 시 실행되며, 콘솔에 메시지가 출력됩니다.

function Button() {
  function handleClick() {
    console.log("버튼이 클릭되었습니다!");
  }

  return <button onClick={handleClick}>클릭</button>;
}

---

✅ 3번 문제 정답: 2번 (useState를 사용하여 입력 값을 상태로 관리한다.)

📌 해설: 리액트에서는 useState를 활용하여 폼 입력 값을 상태로 관리해야 합니다.

import { useState } from "react";

function Form() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <form>
      <input type="text" value={name} onChange={handleChange} />
      <p>입력된 값: {name}</p>
    </form>
  );
}

---