이벤트 규칙

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

인풋값 핸들링 해보기

1. 인풋의 값이 변화되는 이벤트 onChange 연결
2. 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값)
3. setter를 이용해서 state변경하기
4. 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를 하나로 관리하기(객체로 사용) 😊

• 객체에 ...(spread operator) 를 사용하면, 객체의 모든 키와 값을 펼쳐서 나열해줍니다

const EventComponent2 = () => {

    const [form, setForm] = useState({name: '', topic: ''});//객체 state

    let handleChange = (e) => {
		    const {name, value} = e.target;
		    /*
				{...data, 키 : 값}
				의 형태로 키만 변경합니다.
				*/
        //const copy ={...form, [name]: value }//spread문법으로 복사 후 키 값 수정
        //setForm(copy);//state변경
        setForm( prev => {
            return {...prev, [name]: value}
        })
        
    }

    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>
    )
}