#6. 이벤트 처리(Handling Events)

import styles from "./Hello.module.css";

export default function Hello(){
  function showName() {
    console.log("Mike");
  }
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button onClick={() => {
          console.log(30);
        }
      }>Show age</button>
    </div>
  );
}

• 위에 함수 선언해서 불러오거나 익명함수 선언하는 방식 2가지 있음!

export default function Hello(){
  return (
    <div>
      <input type="text" onChange={(e)=>{ 
        console.log(e.target.value)
      }}></input>
    </div>
  );
}

export default function Hello(){
  function showText(e){
    console.log(e.target.value);
  }
  return (
    <div>
      <input type="text" onChange={showText}></input>
    </div>
  );
}

export default function Hello(){
  function showText(txt){
    console.log(txt);
  }
  return (
    <div>
      <input type="text" onChange={(e)=>{ 
        const txt = e.target.value;
        showText(txt);
      }}></input>
    </div>
  );
}

다양하게 작성할 수 있음 → 상황에 맞춰 편하고 가독성 좋은 코드로 작성하자!