🟦 [React] input에서 Enter시 함수 실행하기

 

✔ 리액트

 // 엔터시 handleSearch() 함수 실행
const onKeyDown = (e) => {
    if(e.key === 'Enter'){
        handleSearch();
    }
}

return(
    <input type="text" placeholder="검색어를 입력하세요" onKeyDown={onKeyDown}/>
)

 

✔ 바닐라 js

document.getElementById("searchInput").addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        handleSearch();
    }
});

 

 

차이점
=> 리액트는 가상 DOM을 사용하기 때문에 바닐라 js에서 처럼 직접 document.getElementById를 호출할 필요 없음

 

 

하지만 개념은 바닐라 js!