이벤트 객체(event)에서 자주 사용하는 속성

✅ 이벤트 객체(event)에서 자주 사용하는 속성 정리

React에서 이벤트 객체(event)는 사용자 입력(클릭, 키 입력 등)이 발생하면 자동으로 생성되어 핸들러 함수에 전달됩니다.
자주 사용하는 속성들을 정리하면 활용도가 높아집니다.

---

🔹 1. event.target

✔ 이벤트가 발생한 요소(태그)를 가리킴
✔ 클릭된 버튼, 입력된 input 요소 등을 직접 참조할 수 있음

✅ 예제: 클릭된 버튼 확인하기

function handleClick(event) {
  console.log(`클릭된 요소:`, event.target); // 클릭된 버튼 요소 출력
  console.log(`클릭된 버튼 ID:`, event.target.id);
}

function MyComponent() {
  return (
    <div>
      <button id="btn1" onClick={handleClick}>버튼 1</button>
      <button id="btn2" onClick={handleClick}>버튼 2</button>
    </div>
  );
}

✔ event.target.id → 클릭된 버튼의 ID 확인 가능
✔ event.target.tagName → BUTTON 등 클릭된 요소의 태그명 확인 가능

---

🔹 2. event.type

✔ 이벤트의 종류(클릭, 키 입력, 마우스 이동 등)를 확인
✔ 여러 이벤트를 하나의 핸들러에서 처리할 때 유용

✅ 예제: 여러 이벤트를 감지하기

function handleEvent(event) {
  console.log(`이벤트 유형: ${event.type}`);
}

function MyComponent() {
  return (
    <div>
      <button onClick={handleEvent}>클릭</button>
      <input onChange={handleEvent} placeholder="입력해보세요" />
      <div onMouseEnter={handleEvent} style={{ padding: "10px", border: "1px solid black" }}>
        마우스를 올려보세요
      </div>
    </div>
  );
}

✔ event.type을 출력하여 이벤트 종류(click, change, mouseenter 등)를 확인 가능
✔ 하나의 함수(handleEvent)로 여러 이벤트를 처리할 때 유용

---

🔹 3. event.target.value (input 요소에서 자주 사용)

✔ 사용자가 입력한 값 가져오기
✔ input, textarea 같은 입력 요소에서 중요

✅ 예제: 입력된 값 가져오기

function handleChange(event) {
  console.log(`입력된 값:`, event.target.value);
}

function MyComponent() {
  return <input type="text" onChange={handleChange} placeholder="입력하세요" />;
}

✔ event.target.value → 사용자가 입력한 값을 실시간으로 가져옴

---

🔹 4. 이벤트 객체 활용 예제: 동적 버튼 UI 만들기

function handleClick(event) {
  console.log(`클릭된 버튼: ${event.target.innerText}, ID: ${event.target.id}`);
}

function MyComponent() {
  return (
    <div>
      <button id="save" onClick={handleClick}>저장</button>
      <button id="delete" onClick={handleClick}>삭제</button>
    </div>
  );
}

✔ 클릭한 버튼이 저장인지 삭제인지 구분 가능
✔ event.target.innerText로 버튼 내부 텍스트 가져오기

---

✅ 최종 정리 (암기용)

이벤트 속성	설명	사용 예시
event.target	이벤트가 발생한 요소(태그)를 가리킴	event.target.id, event.target.className
event.type	발생한 이벤트의 종류	"click", "change", "mouseenter"
event.target.value	입력 필드의 값	event.target.value (input에서 활용)

💡 이벤트 객체를 잘 활용하면 더욱 유연한 React UI를 만들 수 있습니다! 🚀

✔ 계속 연습하면 초급을 넘어 React 개발자로 성장할 수 있습니다! 🔥