리액트 Input 컴포넌트: 모바일 사용자를 위한 키보드 타입 지정 방법

input 요소에 inputMode 속성을 추가하면, 표시되는 키보드 유형을 지정할 수 있습니다.

이 속성은 다양한 모바일 기기에 최적화된 키보드를 사용자에게 제공합니다.

 

inputMode 가 가질 수 있는 다양한 값들은 다음과 같습니다.

• none
• text
• tel
• url
• email
• numeric
• decimal
• search
  
  
  

inputMode 속성을 원하는 값으로 설정하면 적절한 키보드가 표시되어 사용자 경험을 개선할 수 있습니다.

입력 모드 예제

다음은 inputMode의 사용 예제입니다.

이 예제를 사용하면 React의 input 요소에 inputMode 속성을 추가할 수 있습니다.

import React from 'react';

function Example() {
  return (
    <div>
      <label htmlFor="inputElement">Enter your phone number:</label><br />
      <input type="tel" id="inputElement" name="phoneNumber" inputMode="tel" />
    </div>
  );
}

위 코드에서 inputMode 속성은 tel로 설정되어 있으므로, 전화번호 입력을 위해 적절한 키패드가 표시됩니다.

이 외에도 적절한 상황에 따라서 inputMode를 사용하면 사용자 경험을 많이 개선 할수 있습니다.