[React JS] #5 이벤트 처리

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link)

버튼에 이벤트를 추가하는 예제를 통해 이벤트 처리하는 방법에 대해 알아보자.

우선 아래와 같이 Hello.js의 내용에 <button>태그를 추가한다.

export default function Hello() {
    return <div>
        <h1>Hello</h1>
        <button>Show name</button>
        <button>Show age</button>
    </div>;
}

방법 1. 함수

showName() 함수를 추가하여, 버튼의 onClick 옵션으로 넣어준다.

여기서 주의할 점은 중괄호 내부에 showName이 아닌 showName()을 작성하게 되면 showName() 함수가 반환하는 값이 들어가게 되어, undefined가 반환되므로 주의하자.

export default function Hello() {
    function showName() {
        console.log("rang");
    }

    return <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button>Show age</button>
    </div>;
}

방법 2. 인라인 함수로 작성

onClick 옵션에 바로 함수를 작성하여 이용하는 방법이다.

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

인자 이용하기

이 방법의 장점은 인자에 값을 넘겨서 표현하기가 편하다는 것이다. showAge() 함수를 이용하는 부분을 보자.

export default function Hello() {
    function showAge(age) {
        console.log(age);
    }
    return <div>
        <h1>Hello</h1>
        <button onClick={
            ()=>{
                console.log("rang");
            }
        }>Show name</button>
        <button onClick={
            ()=>{
                showAge(26)
            }
        }>Show age</button>
    </div>;
}

onChange 옵션 이용하기

export default function Hello() {
    function showAge(age) {
        console.log(age);
    }
    function showText(e) {
        console.log(e.target.value);
    }
    return <div>
        <h1>Hello</h1>
        <button onClick={
            ()=>{
                console.log("rang");
            }
        }>Show name</button>
        <button onClick={
            ()=>{
                showAge(26)
            }
        }>Show age</button>
        <input type="text" onChange={showText} />
    </div>;
}

 

혹은 인라인으로 화살표 함수를 이용하여 아래와 같이 작성할 수 있다.
<input type="text" onChange={(e)=>{console.log(e.target.value); }} />

 

혹~은 아래와 같이 showText를 살짝 변형하여 사용할 수도 있다.

export default function Hello() {
    function showAge(age) {
        console.log(age);
    }
    function showText(text) {
        console.log(text);
    }
    return <div>
        <h1>Hello</h1>
        <button onClick={
            ()=>{
                console.log("rang");
            }
        }>Show name</button>
        <button onClick={
            ()=>{
                showAge(26)
            }
        }>Show age</button>
        <input type="text" onChange={(e)=>{
            const text = e.target.value;
            showText(text);
        }} />
    </div>;
}

입력해서 값이 바뀔 때마다 콘솔에 값이 출력됨을 알 수 있다.