상황

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} /
)

이렇게 하면 깔끔하게 해결할 수 있다.

출처
https://kingheedo.tistory.com/46