[Next.js] enter로 검색하기

enter로 검색해보자

본래 onKeyPress가 사용되어왔지만 deprecated되었기 때문에 onKeyDown을 사용한다.

// search.tsx

const search = () => {
	const [search, setSearch] = useState('')
    
    const handleChange = (e) => {
		setSearch(e.target.value)
    }
    
    const handleKeyDown = (e) => {
    	if(e.key === 'Enter') {
        	// enter 했을 때의 코드 작성
          	// if(e.keyCode === 13) 도 사용가능하다.
        }
    }
    
    
    return (
    	<input type="text" placeholder="검색" value={search} onChange={handleChange} onKeyDown={handleKeyDown} />
    )
}

출처
https://www.delftstack.com/howto/react/onkeypress-react/