4. React - 이벤트 처리(Handing Events)

ㅁ 이벤트 처리 함수 만들기 2가지

---

1. 함수(Event)

Hello.js

export default function Hello(){

    function showName(){        // 1. 이벤트 함수 따로 정의

        console.log("ABCD");

    }

    return(        

        <div>

            <h1>Hello</h1>

            <button onClick={showName}>Show name</button> 

            <button>Show age</button>

        </div>

    );

}

---

2. 함수(Event)

export default function Hello(){

    return(

        <div>

            <h1>Hello</h1>

            <button>Show name</button>

            <button onClick={       // 이벤트 함수 직접 정의

                () => {

                    console.log("EFG")

                }

            }>Show age</button>

        </div>

    );

}

---

ㅁ 결론 상황에 맞게 잘 쓰면됨

---

ㅁ 직접 이벤트 함수 작성 장점

ㅇ 값을 전달하기 편함

export default function Hello(){

    function showAge(age){

        console.log(age);

    }

    return(

        <div>

            <h1>Hello</h1>

            <button>Show name</button>

            <button onClick={       // 이벤트 함수 직접 정의

                () => {

                    showAge(30);

                }

            }>Show age</button>

        </div>

    );

}

---

ㅁ 이벤트 함수 코딩 스타일

---

1. 이벤트 함수 코딩 스타일

Hello.js

export default function Hello(){

    function showText(e){

        console.log(e.target.value)

    }

    return(

        <div>

            <h1>Hello</h1>

           <input type="text" onChange={showText}></input>

        </div>

    );

}

---

2. 이벤트 함수 코딩 스타일

Hello.js

export default function Hello(){    

    return(

        <div>

            <h1>Hello</h1>

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

        </div>

    );

}

---

3. 이벤트 함수 코딩 스타일

Hello.js

export default function Hello(){

    function showText(txt){

        console.log(txt);

    }

    return(

        <div>

            <h1>Hello</h1>

            <input type="text" onChange={e => {

                const txt = e.target.value;

                showText(txt);

                }}> 

            </input>

        </div>

    );

}

---