react 7 (form)

input에 값이 바뀌어도 app.js는 다시 실행되지 않는다 --> 이런것을 react로부터 제어받지 않는다라고 해서 uncontroled component라고 한다.

input안의 내용이 useState의 상태값과 매칭되도록 맞춰주어야한다.

‼ input 태그에서는

e ==> 이벤트 받음 상태의 값을 변경하기 위해 setName 함수를 사용하며
사용자가 입력한 값을 상태값으로 적용하기위해 e.tartget.value를 사용한다.

onChange={(e)=>{setName(e.target.value)}}

form은 새로고침이 일어나는 속성을 가지고 있다.

새로고침을 막기위해 onSubmit 함수를 사용하고 e.preventDefault()로 새로고침을 막음.

<form onSubmit={(e)=>{e.preventDefault()}}>

전체코드

import "./App.css";
import {useState} from 'react'
function App() {
  
  const [name,setName] = useState()

  return (
     <div className="counter">
      <form onSubmit={(e)=>{e.preventDefault()}}>
        <label htmlFor="name">이름</label>
        <input type="text" id="name" name="name" value={name} onChange={(e)=>{
          console.log(e.target.value)
          setName(e.target.value)
        }}/>
        <button>submit</button>
      </form>
     </div>
  )

}

export default App;