1. input 생성

InputSample.jsx

export const InputSample = () => {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  )
}

• input에 입력하는 값이 하단에 표시
• 초기화 버튼을 누르면 input 값이 비워지도록 구현
• useState 사용
• input의 onChange 이벤트 사용
  • 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아 사용
  • 객체의 e.target은 이벤트가 발생한 DOM인 inputDOM을 가리킴
  • DOM의 value 값 -> e.target.value를 조회하면 현재 input에 입력한 값이 무엇인지 알 수 있음
  • 이 값을 useState를 통해 관리

2. input 상태 관리

InputSample.jsx

import { useState } from 'react'

export const InputSample = () => {
  const [text, setText] = useState('')

  const onChange = (e) => {
    setText(e.target.value)
    // e.target.value = DOM의 value 값 -> input 입력 값 바로 업데이트
  }

  const onReset = () => {
    setText('')
  }
  return (
    <div>
      <input onChange={onChange} value={text} />
      {/* input의 상태를 관리할 때, input 태그의 value 값도 설정해야 함 *중요*
        -> 상태가 바뀌었을 때 input의 내용도 업데이트됨 */}
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  )
}

• 중요 : input의 상태를 관리할 때, input 태그의 value 값도 설정해줘야 함
  • 상태가 바뀌었을때 input의 내용도 업데이트

해당 내용은 다음 자료를 참고했습니다.
https://react.vlpt.us/basic/08-manage-input.html