콜백함수인 이벤트 핸들러에 인자를 넘기는 경우의 수

1. 콜백함수에 어떤 인자도 넘기지 않을 때

import React from "react";
export default function App(){
    const onClickHandler = () => alert("aaa");

    return{
        <div className = "App">
            <button onClick={onClickHandler}>Click</button>
            //또는 따로 함수 구현하지 않고
            <button onClick={() => alert("aaa")}>Click</button>
        </div>
    }
}

2. (이밴트 객체가 아닌) 어떤 인자를 넘길 때

✅ 함수 자체를 불러와야지 실행값을 넣어주면 안됨

<button onClick={onClickHandler("aaa")}>Click</button> 가 아니라
<button onClick={() => onClickHandler("aaa")}>Click</button> 이렇게

3. 이밴트 객체만을 인자로 넘길 때

import React from "react";
export default function App(){
    const onClickHandler = e => alert(e.target.value);

    return{
        <div className = "App">
            <button value = {"clickBtn"} onClick={e => onClickHandler(e)}>Click</button>
            //또는 
            <button value = {"clickBtn"} onClick={onClickHandler}>Click</button>
            </div>
    }
}

4. 이벤트 객체와 이벤트 객체가 아닌 인자를 함께 넘길 때

import React from "react";
export default function App(){
    const onClickHandler = (name, e) => {
        alert(e.target.value);
        console.log(name);
    }

    return{
        <div className = "App">
            <button value = {"clickBtn"} onClick={e => onClickHandler("aaa", e)}>Click</button>
            //또는 
            <button value = {"clickBtn"} onClick={e => onClickHandler("aaa")(e)}>Click</button>
        </div>
    }
}

또는

import React from "react";
export default function App(){
    const onClickHandler = name => e => {
        alert(e.target.value);
        console.log(name);
    }

    return{
        <div className = "App">
            <button value = {"clickBtn"} onClick={onClickHandler("aaa")}>Click</button>
            </div>
    }
}

출처

https://velog.io/@devjade/%EB%A6%AC%EC%95%A1%ED%8A%B8-onClick%ED%95%A8%EC%88%98%EB%A1%9C-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95