리액트 (React) : onclick에 매개변수를 넣고 싶으면? 콜백함수를 써라

function App() {
  const play = (userChoice)=>{
    console.log("선택됨",userChoice)
  }

<div className='btn'>
      <button onClick={()=>play("scissors")}>가위</button>
      <button onClick={()=>play("rock")}>바위</button>
      <button onClick={()=>play("paper")}>보</button>
    </div>

 

✔ onClick을 했을때 play("scissors") 만 해버리면 어떠한 현상이 일어냐면

=> 클릭을 하지 않았는데도 실행이 된다

Why? 

리액트는 UI를 그려줄때 함수가 있으면 바로 실행을 해버리는 경향이(?) 있기 때문에

함수안에 매개변수를 넣어줄땐? 앞에 콜백함수 () => 를 넣어줘야 제대로 정상 작동이 된다.