매개변수와 함께 이벤트 전달하는 법

🔶 onClick이벤트 실행시, modifier함수를 화살표함수 안에 감싸서 쓰는 이유

• onClick이벤트 실행시 state값이 1씩 증가되는 코드

function App() {
  const [cnt, setCnt] = React.useState(0);
  const onClickFn = () => {
    setCnt((prev) => prev + 1);
  };

  return (
    <>
      <button onClick={onClickFn}>click</button>
      {/* <button onClick={setCnt((prev) => prev + 1)}>click</button> 
      이렇게 바로 modifier함수 사용하면 오류남*/}
      <p>{cnt}</p>
      </>
  );
}
// 1,2,3,4,5

ReactDOM.render(<App />, rootEl);

• onClick={setCnt((prev) => prev + 1)} 이렇게 하면
  setCnt()함수가 "클릭하기 전에 실행되서" setCnt함수의 리턴값인 "undefined"가 들어감."

• 따라서 "클릭했을때 온클릭 함수가 실행"되기 위해, 익명함수 안에 modifier함수를 써야 함.

• onClick={()=>setCnt(el)}
  : 클릭시 익명함수가 실행되서 modifier함수가 실행되게 됨.

🔶 1. 이벤트 발생시 modifier 함수에 매개변수를 전달하는 법

<script type="text/babel">
  const rootEl = document.querySelector("#root");

  function App() {
    const [count, setCount] = React.useState(0);
    // 1.
    // 이런식으로 화살표 함수 안에 modifier함수를 넣게되면, 매개변수(cur)를 전달할 수 있음
    const onClick = () => {
      setCount((cur) => cur + 1);
    };
    // 2.
    // const onClick = setCount("clicked!");
    // 이런식으로 사용하게 된다면, setCount이 클릭 하기도 전에 바로 실행되서 리턴값인 undefined가 반환되서 오류남.

    return (
      <>
        <button type="button" onClick={onClick}>
          button
        </button>
        <h3>{count}</h3>
        </>
    );
  }

  ReactDOM.render(<App />, rootEl);
</script>

🔶 2. 이벤트 발생시 매개변수 전달 없이 함수 실행하는 법.

    <script type="text/babel">
      const rootEl = document.querySelector("#root");
  
      function App() {
        const [value, setValue] = React.useState("click");
    
        function showName() {
          setValue("clicked");
        }

        return (
          <>
// 3. 이벤트 발생시 매개변수 없이 바로 실행되므로, 함수이름(showName)만 써주면 됨!
// 따로 화살표 함수안에 showName넣을 필요 없음 // ()=>{showName()} 이런식x 
// showName(매개변수) 이렇게 쓰면 클릭하기도 전에 실행되서 undifined가 나와 오류남.
            <button type="button" onClick={showName}>
              button2
            </button>
            <h3>{value}</h3>
          </>
        );
      }

      ReactDOM.render(<App />, rootEl);
    </script>