4. 리액트 이벤트 핸들링

이벤트 규칙

1. 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp
2. 이벤트를 전달할 때는 {함수} 형태로 사용합니다

---

 

인풋값 핸들링 해보기

1. 인풋의 값이 변화되는 이벤트 onChange 연결
2. 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값)
3. setter를 이용해서 state변경하기

const EventComponent = () => {

    const [name, setName] = useState('');
    let handleName = (e) => { //2.event객체 활용
        setName(e.target.value); //3.state변경 (input의 value도 변경)
    }
    return (
        <div>
            <h3>리액트 이벤트 핸들링</h3>
            <input type="text" name="name" onChange={handleName} value={name}/><br/> {/*1. 이벤트연결*/}
            <h3>체인지된 결과: {name}</h3>
        </div>
    )
}

---

useState를 하나로 관리하기(객체로 사용) 😊

const EventComponent2 = () => {
     
    const [form, setForm] = useState({name: '', topic: ''}); //객체 state
    
    let handleChange = (e) => {
        const copy ={...form, [e.target.name]: e.target.value } //spread문법으로 복사 후 키 값 수정
        setForm(copy); //state변경
    }

    let handleClick = () => {
        alert(`결과: ${form.name} 님의 할일: ${form.topic}`)
        setForm({name: '', topic: ''}) //state변경
    }
    
    return (
        <div>
            
            <h3>리액트 이벤트 핸들링(객체로 핸들링)</h3>
            <input type="text" name="name" onChange={handleChange} value={form.name}/><br/>
            <h3>체인지된 결과: </h3>

            <input type="text" name="topic" onChange={handleChange} value={form.topic} /><br/>
            <h3>체인지된 결과: </h3>

            <button type="button" onClick={handleClick}>클릭미</button>

        </div>
    )
}