[REACT] React Event

[REACT] STATE

---

React Event

이벤트 규칙

• 이벤트의 이름은 전부 카멜 표기법으로 표현된다. 
  onkeyup → onKeyUp
• 이벤트를 전달할 때는 { 함수 } 형태로 사용한다.

---

Input 값 핸드링 하기

• Input의 값이 변화되는 이벤트 onChange 연결
• 이벤트 내부 첫 번째 매개변수에서 event 객체 활용하기

e.target.속성값

• setter를 이용해 state 변경
• value 속성을 이용해 state 동기화 처리
  • value = { 상태 값 } 처리
  • state를 통해 input의 value를 제어하지 않으면, 추후 잘못된 에러문장을 만날 수 있다.

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) => {
				{...data, 키 : 값}
        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>
    )
}