useRef

input DOM엘리먼트의 value를 직접 컨트롤할때 사용하면 input태그의 onChange 함수를 줄일수있고, state 상태값 하나를 덜 쓰기때문에 코드가 줄어든다.


import {useState} from "react"
const [input, setInput] = useState("")
...
const handleInput = (e) => {
	setInput(e.target.value);
	}
addTodos(input) 
// useContext로 받아온 상위컴포넌트의 add함수 props의 인자로 input상태의 value를 넘겨준다.
return 
<input onChange={handleInput}/>


import {useRef} from "react"
const inputRef = useRef();
...
addTodos(inputRef.current.value) 
// useContext로 받아온 상위컴포넌트의 add함수 props의 인자로 ref의 value값을 넘겨줄수있다.
return
<input inputRef={inputRef}/>