단순히 값을 입력 받기 위해서는? state || ref

state로 입력값 관리하기

state와 setState를 할 수 있는 함수를 관리해야 하고
그 state를 또 다시 DOM 요소의 value로 설정해 주어야 함

이를 제어된 컴포넌트 라고 부를 수 있음
input 요소에서 state를 업데이트 받고 그 값을 다시 input 값에 할당하기 때문에
리액트가 state에 대한 제어를 하고 있음

/** useState */
const [name, setName] = useState();
const nameChangeHandler = (event) => {
	setName(event.target.value);
}

const nameValidationHandler = () => {
	console.log(name); //..
}

const nameResetHandler = () => {
	setName('');
}

return (
  <div>
  	<input type="text" 
           value={name} 
           onChange={nameChangeHandler} />
  </div>
)

ref로 입력값 관리하기

useRef를 ref속성에 연결하여 해당 DOM요소의 입력값을 받을 수 있음

이를 제어되지 않는 컴포넌트 라고 부를 수 있음
이 방법은 입력값을 받아오긴 하나, 이를 다시 돌려주지는 않음
current.value로 값을 재설정하는 것은 DOM API를 사용하는 것 뿐임

/** useRef */
const nameInputRef = useRef();
const nameValidationHandler = () => {
	console.log(nameInputRef.current.value);
}

const nameResetHandler = () => {
    // 지양해야하는 방법이긴 하나, 
    // DOM의 값을 재설정해 주기 위해서는 많이 쓰임
    // 새로운 요소를 추가하거나 css 재설정을 위해서 쓰이면 절대 안됨!
	nameInputRef.current.value = '';
}

return (
	<input type="text"
           ref={nameInputRef} />
)

결론

단순히 키의 값을 입력받거나 읽기만 하고 싶다면 useRef 사용
그게 아니라면 useState 사용