Form 제출 시 input값 가져오는 두가지 방법

Form 제출 시 input값 가져오는 두가지 방법이 있다.

State에서 가져오는 것과 ref에서 읽은 값 두가지이다.

const nameInputRef = useRef();
const [enteredName, setEnteredName] = useState('');

const nameInputChangeHandler = event => {
  setEnteredName(event.target.value);
}

const formSubmissionHandler = event => {
  event.preventDefault();
  const enteredValue = nameInputRef.current.value;
  
  //1. useRef 사용하여 값 가져오기
  console.log(enteredValue);
 //nameInputRef.current.value=''; //DOM을 직접 조작하지 않도록 한다.
  
  //2. State에서 값 가져오기
  console.log(enteredName);
  setEnteredName('')
 }

return (
  <form onSubmit={formSubmissionHandler}>
    <input type="text" id="name" ref={nameInputRef} onChange={nameInputChangeHandler}
     value={enteredName}/>
  </form>

)

 

input값이 폼으로 제출될 때 한번만 필요하다면
모든 키 입력마다 상태를 업데이트 하는 것은 불필요하므로 Ref가 나을 것이다.
반면 즉각적인 유효성 검증을 위해 키 입력마다 입력값이 필요하다면 state를 사용해야한다
또한 값을 초기화 할때도 state를 조작해야한다.
ref를 통해 값을 조작하는 것은 DOM을 직접 조작하는 것이기 때문에 권장하지 않는다.