코딩앙마 React Js 이벤트 처리

이벤트를 거는 방법

 

1. 미리 함수를 하나 만들어놓고 전달해주는 것

export default function Hello() {

    function showName() {
        console.log("Mike");
    }
    return (
        <div>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
            // 여기에 showName()을 넣어주면 showName이 반환하는 값을 가져오는데
            // 지금은 반환하는 값이 없으니까 undefined가 들어가게 된다.
            // 함수명만 적어주면 기능만 실행해줌!
            <button>Show age</button>        
        </div>
        
    );
}

 

2. onClick 이벤트 내부에 직접 함수를 작성

<button onClick= {() => {
     console.log(30);
}
}>Show age</button>

장점 : 매개변수를 전달하기 편하다

export default function Hello() {

    function showName() {
        console.log("Mike");
    }

    function showAge(age) {
        console.log(age);
    }

    return (
        <div>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
            {/* 여기에 showName()을 넣어주면 showName이 반환하는 값을 가져오는데
            지금은 반환하는 값이 없으니까 undefined가 들어가게 된다.
            함수명만 적어주면 기능만 실행해줌! */}
            <button onClick= {() => {
                showAge(10);
            }
            // 매개변수를 전달하기 편하다
            }>Show age</button>        
        </div>
        
    );

export default function Hello() {

    function showName() {
        console.log("Mike");
    }

    function showAge(age) {
        console.log(age);
    }

    function showText(txt) {
        console.log(txt)
    }

    return (
        <div>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
            {/* 여기에 showName()을 넣어주면 showName이 반환하는 값을 가져오는데
            지금은 반환하는 값이 없으니까 undefined가 들어가게 된다.
            함수명만 적어주면 기능만 실행해줌! */}
            <button onClick= {() => {
                showAge(10);
            }
            // 매개변수를 전달하기 편하다
            }>Show age</button>
            <input type="text" onChange={e => {
                const txt = e.target.value;
                showText(txt);
            }}
            />
        </div>
        
    );
}