[React] - input

Input 상태 관리하기

InputSample.js 생성

App.js 수정

• input에 입력하는 값이 하단에 나타나고 초기화 버튼을 누르면 input의 값이 비워지도록 구현해 보겠습니다.
• useState와 input의 onChange라는 이벤트를 사용해 보겠습니다.
  이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데
  이 객체의 e.target은 이벤트가 발생한 DOM인 inputDOM을 가리키게 됩니다.
  이 DOM의 value 값
  즉, 이 값을 useState를 통해서 관리해 주면 됩니다.
• inputSample을 수정해 보겠습니다.

• useState를 사용하여 초기값은 빈 값을 나타내기 위해 useState(''); 이렇게 코드를 구현했습니다.
• input태그 안에는 onChange이벤트를 사용하고 value값을 받도록 설정했습니다.
  그래야 상태가 바뀌었을 때 input의 내용도 업데이트 되기 때문입니다.
• button 태그에는 onClick이벤트를 사용하여 버튼 클릭 시 내가 설정한 값으로 되도록 하기 위해 사용했고 저는 초기화를 시키기 위해 setText 안에 ''를 사용하여 빈값이 되도록 설정했습니다.
  onChange와 onClick 이벤트는 위 const onChange와 const onClick에 설정한 onChange, onReset을 이용하여 각각의 역할이 수행도록 하였습니다.