React event, state, props 예제

function App() {
   const [inputValue, setInputValue] = useState('defaultValue');

  return (
    <div className="App">
        <input onChange={(event) => {
            return setInputValue(event.target.value)       
        }} defaultValue={inputValue}/>
        <span>{inputValue}</span>
    </div>
  );
}

// 인풋에 들어가는 밸류를 출력하는 예제

function App() {
    const [person, setPerson] = useState({ name: "김민수", school: "엘리스대학교"});
    function eventHandle(event) {
       const { name, value } = event.target;
       setPerson((current) => {
        const newPerson = {...current};
        newPerson[name] = value;
        return newPerson;
    })
    }
    
  return (
    <div className="App">
        <input name="name" value={person.name} onClick={eventHandle} />
        <input name="school" value={person.school} onClick={eventHandle} />
        <button onClick={() => {
            alert(`${person.name}님은 ${person.school}에 재학중입니다.`)
        }}/>
    </div>
  );
}

// 한 개의 이벤트 핸들러를 여러 Element에 재사용하기