ref 속성을 이용한 input value 속성 가져오기.

아래는 리액트가 요구하는 input의 value 속성과 관련된 코드 패턴

const [value,setValue] = useState<string>("")
const onChangeValue = (e:ChangeEvent<HTMLInputElement>)=>
	setValue(notUsed => e.target.value)

<input value={value} onChange={onChangeValue} />

리액트가 이런 패턴을 요구하는 것은 가상 DOM 환경에서 빠른 리렌더링을 위해서 이다. 하지만 ref 속성으로 물리 DOM 객체가 만들어지면 이 객체의 value 속성 값을 곧바로 얻을 수 있다.

const inputRef = useRef<HTMLInputElement>(null)
const getValue = useCallback(()=>{
	alert(`input value : ${inputRef.current?.value}`)	
	},[])
//ref속성을 이용해 focus 메서드 호출.
useEffect(()=>{
	inputRef.current?.focus()
	},[])