input으로 입력받아 onChange를 통해 변수에 저장을 하고 이를 바탕으로 api요청하려 한다.
const [search, setSearch] = useState('')
const handleChange = (e) => {
setSearch(e.target.value)
if(search) {
try {
// api요청
}catch(e){
console.error(e.response)
}
}
}
return (
<input type='text' value={search] onChange={handleChange} /
)
하지만 입력값을 보면 delay가 발생하여 마지막 글자가 짤린 상태로 api 요청이 이루어지기 때문에 내가 원하는 값을 온전히 받아올 수 없다.
// ex) 입력: '토니', 출력: '토ㄴ'
handleChange 쪽은 useCallback으로 search 값이 바뀔 때마다 setSearch를 적용시켜주고
api 요청은 useEffect를 사용한다.
const [search, setSearch] = useState('')
const handleChange = useCallback((e) => {
setSearch(e.target.value)
}, [search])
useEffect(()=> {
const getResponse = async () => {
try {
// api 요청
} catch(e) {
console.error(e.response)
}
}
getResponse()
}, [search])
return (
<input type='text' value={search] onChange={handleChange} /
)
이렇게 하면 깔끔하게 해결할 수 있다.