form 태그 안에 사용하여 사용자로부터 입력을 받아들이는 용도로 사용하는 input은 매우 중요한 태그입니다. 이 문서에서는 input 태그를 사용하는 방법에 대해 알아보겠습니다.

---

input 태그 형식

input은 다른 태그와 달리 닫는 태그가 없습니다.
input안에는 다음과 같은 속성을 정의할 수 있습니다.

속성	설명
type	입력태그의 유형
value	입력이 저장될 변수를 의미합니다.
name	서버로 전달되는 이름을 의미합니다.
placeholder	입력 이전 기본적으로 출력될 문자열을 정의합니다.

type 유형

입력 태그의 유형을 결정하는 type 속성 유형에는 다음과 같은 값을 가지고 있습니다.

속성값	설명
text	기본적인 텍스트를 입력할 수 있는 칸을 생성합니다.
password	비밀번호와 같이 내용을 감출 수 있는 칸을 생성합니다.
radio	라디오 버튼을 생성합니다.
checkbox	체크박스를 생성합니다.
file	파일을 입력할 수 있는 창을 생성합니다.
image	이미지 전송버튼을 생성합니다.
hidden	사용자에게 보이지 않지만 서버로 전송되는 입력창을 생성합니다.
submit	서버로 전송하는 버튼을 생성합니다.
button	버튼을 생성할 수 있습니다.

---

onchange 함수

input는 onchange 함수를 이용하여 입력한 내용을 변수에 저장할 수 있습니다.

코드는 다음과 같습니다.

function menu(props) {
  
 const [data, change_data] = useState();

 const handleChange = (e) => {
    change_data(e.target.value);
    console.log(data);
  };

 return(
   <div>
 <input placeholder="  지역명또는 도로명주소로 검색" type="text" name="search" value={data} onChange={handleChange}/>
   </div>
 )

위 코드를 통해 위와 같은 입력창이 생성되었습니다.

먼저 placeholder 태그를 이용하여 입력 이전에 출력될 input창 설명을 입력합니다.
type="text"를 통해 문자열을 입력받는다고 정의합니다.
name="search" 를 통해 서버에 저장될 이름을 저장합니다. value에 저장할 예정이므로 별도로 입력하지 않아도 됩니다.
value={data} 를 통해 data에 사용자가 입력한 내용이 저장됩니다.
onChange={handleChange}는 input창에 입력이 발생할때마다 함수가 실행됩니다.
handleChange 함수는 입력된 내용을 data에 저장하고 출력합니다.
이때, 비동기로 인해 console.log는 한 단계 이전의 입력값이 출력됩니다.

위 사진과 같이 입력이 발생하면 정상적으로 변수에 저장하는 것을 알 수 있습니다.

엔터 키 입력받기

input 태그에서 엔터키를 입력할 경우 다른 함수가 바로 실행되어야 하는 경우가 있습니다.
이때 onchange 함수만으로는 엔터를 인식할 수 없습니다.

이를 위해 onKeyPress 함수를 추가로 설정해야 합니다. 코드는 다음과 같습니다.

const handleChange = (e) => {
    change_data(e.target.value);
    console.log(data);
  };
const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      console.log("완료된 입력 " + data);

<input placeholder="  지역명또는 도로명주소로 검색" type="text" name="message" 
      value={data} onChange={handleChange} onKeyPress={handleKeyPress} />

onKeyPress 를 통해 키보드가 입력되는 것을 감지하고 해당 이벤트의 key가 Enter 일 경우 별로도 생성한 함수를 실행시키면 됩니다.