0315

공부내용 한줄 요약
input tag의 value값 변동을 감지하고 state 사용해 업데이트 하는 법.

1. React.useState() 사용해 input의 value를 변수(State값)로 지정.
2. input에 onChange 이벤트 리스너를 추가하고 실행되는 함수지정. onChange={함수}
3. Js event를 받아(?) useState의 (State값을 사용하는)함수를 활용. event.target.value 를 업데이트 하도록.
   
   input 옆에 label 달고 for 속성 사용하면, label 클릭시 input으로 포커스 옮겨주는데 Js의 for와 겹치기 떄문에 React에서는 htmlFor="" 사용.

function App() {
  const [keyword, setKeyword] = React.useState("");
  const onChange = (event) => setKeyword(event.target.value);

  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" 
      placeholder='Search here...' />
      <h1>{counter}</h1>
    </div>
  );
}

// input에서 onChange event 감지 -> Function onChange 실행
-> event 타겟의 value를 받아 setKeyword()에 넣고 실행
-> setKeyword는 state를 변경하는 함수
-> state가 연결되어있는 input의 value가 변경됨

Comment
콘솔에 찍힌 event 객체 아직 잘 못 알아보겠다.