이벤트 처리(Handling Events)

1. function 생성

export default function Hello(){
    function showName(){
        console.log("Mike");
    }
  
 	function showText(e){
        console.log(e.target.value);
    }

    return (
        <>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
			<input type="text" onChange={showText} />
        </>
    )
}

2. 내부 함수

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

			<input type="text" onChange={(e)=>{
                console.log(e.target.value);
            }} />
        </>
    )
}

3. input

export default function Hello(){
    function showText(txt){
        console.log(txt);
    }

    return (
        <>
            <input type="text" onChange={(e) => {
                let txt = e.target.value;
                showText(txt);
            }} />
        </>
    )
}