React UI 라이브러리 antd의 컴포넌트 중 하나인 Input에 대하여 알아봅니다.

<Input />


antd의 Input 컴포넌트는 html의 input 엘리먼트처럼 사용자의 입력을 받아 동작하는 인터렉션 구현시 사용할 수 있습니다. 아래는 Input 컴포넌트의 자세한 사용 방법과 property 및 예제를 함께 알아봅니다.



# antd의 Input 컴포넌트 정보 알아보기
Antd 컴포넌트 중 하나인 Input 컴포넌트방문자의 입력폼 요소 중 하나로 문자열을 등의 입력값을 전달 받아 서버에 전송하는 등 여러 작업을 수행할 수 있습니다.

아래는 Input 컴포넌트에 적용가능한 다양한 property(props) 정보입니다.

value // [Stiring] 입력값
defaultValue // [string] 기본 입력값
disabled // [true] 비활성화
size // [large | middle | small] Input 박스의 크기를 결정
maxLength // [number] 입력 최대값 설정
allowClear // 입력값을 비우는 아이콘과 기능을 수행
border // [boolean] 테두리 값의 적용 여부, (default: true)
readOnly // [boolean] 읽기 전용, 수정 불가능 설정

onChange // 입력값이 바뀌는 경우 콜백 호출
onPressEnter // 엔터키를 입력하는 경우 콜백 호출


위와 같은 property들을 설정하고 사용할 수 있습니다.


! antd Input 읽기전용 설정하기

읽기 전용으로 사용하기 위해서 readOnly props를 추가하도록 합니다. 아래와 같이 코드를 입력합니다.
<Input readOnly={true} />

위와 같이 readOnly 값으로 true / false 값을 설정할 수 있습니다. true인 경우 수정 할 수 없는 상태가 됩니다.


추가로 Input 컴포넌트는 아래와 같이 사용 목적에 따라 Textarea, Search 등등으로 사용할 수 있습니다.
<Input.TextArea />

const { TextArea } = Input;
<TextArea />

위와 같이 주로 사용되며 동일하게 적용되어 나타납니다. 각각의 타입에 대하여 지원되는 property 정보가 존재합니다. 아래에서 더 자세히 알아보겠습니다.


@ Input.TextArea

textarea 태그 요소처럼 여러 줄을 사용하여 입력을 받을 수 있습니다.

onResize // 사이즈 조절시 콜백 호출
autoSize // 높이값 자동 조절 기능


@ Input.Search

검색을 목적으로 입력값을 요청할 경우 사용됩니다.

onSearch // 검색 아이콘 클릭시 콜백 호출 
loading // 로딩 출력


@ Input.Password

패스워드 등 보안, 인증에 관련된 입력값이 필요할 때 사용합니다.

visibilityToggle // [boolean] 보여주기/숨기기 토글 기능


@ Input.Group
여러개의 input 태그 요소를 사용할 수 있습니다.

아래는 기본적인 Input 컴포넌트 예제입니다.


! antd Input 컴포넌트 예제보기
React에서 Input 사용하는 간단한 예제를 만들어보려고 합니다.


!! 상태 값과 연동하는 간단한 입력 폼 예제
첫 번째 예제는 상태 값을 연동하여 값을 가져오거나 변경하는 방법입니다.
<Input
  value={this.keyword}
  deafaultValue={this.keyword}
  onChange={ this.vaildateSearch }
/>

위에서는 세 가지 props를 볼 수 있습니다. value, defaultValue, onChange가 그것입니다. 위 세 가지만으로 기본적인 입력폼을 만들 수 있습니다. 가장 중요한 value, defaultValue는 모두 해당 상태 값을 Input 폼에 출력합니다. 이때 value는 값이 변경되는 경우 변경된 값을 이 후에 반영되는 상태값이 존재합니다. 만약 초기값 한 번만 필요한 경우라면 deafaultValue를 사용합니다. 그리고 onChange는 값이 변경될 경우 새롭게 값을 업데이트 합니다.


!! 입력 후 상태 값, state를 업데이트 하는 예제

두번째 예제 코드입니다. 템플릿에 아래와 같이 코드를 추가하였습니다.
<Input
  onChange={ this.vaildateSearch }
  onPressEnter={ this.submitSearch }
  placeholder="Search ..."
/>

위 코드를 실행하면 간단한 input 태그가 나타나게 됩니다. 위 코드에 적용된 props는 많이 사용되는 props 요소로 각각 다음의 기능을 수행합니다.

onChange // 값이 바뀌는 경우 콜백 함수 실행
onPressEnter // 엔터키를 입력하는 경우 콜백 함수 실행
placeholder // 입력값이 없는 경우 표시하는 텍스트 문자

키를 Input 화면뷰에 입력할 경우 onChange의 콜백 함수인 vaildateSearch()를 실행하게 됩니다. 입력값을 검증하기 위해서 onChange를 사용하였습니다.
validateSearch = (event) => {
  const keyword = event.target.value;
  const cond1 = keyword.length >= 2; // 입력값이 2자 이상인 경우 true를 반환

  if (cond1) {
    ... // 조건이 true인 경우 뭔가를 수행함
  }
};

여기서는 입력값을 keyword 이름의 변수에 저장하고 첫 번째 조건인 cond1 변수에 length를 사용해 2자 이상인 경우에만 true를 반환하도록 하였습니다. 즉 아래의 if문은 cond1을 만족하는 최소 길이 2자 이상인 경우에만 뭔가를 수행하게 됩니다. 이때의 뭔가는 정상적으로 입력되었음을 알리는 시각적 효과일 수 있습니다. 예를들어 입력폼의 테두리에 그린 표시를 하는 등등 검증을 통과하였을 경우 실행하는 코드가 되겠죠.



!! Input 엔터(enter) 키 입력시 동작

다음으로 엔터 키를 누르는 경우 submitSearch() 함수를 호출하게 됩니다. 즉 입력된 결과를 서버에 전송하는 등의 처리를 수행할 수 있죠. 아래는 submitSearch() 코드입니다.
submitSearch = (event) => {
  const keyword = event.target.value;
  window.open('/search?keyword=' + keyword , '_self');
};

입력값은 이벤트 객체를 사용하여 가져옵니다. event.target.value를 사용하여 변수 keyword에 저장하였습니다. 그리고 /search 이름의 페이지로 이동하는데 /search?keyword=<입력값> 형태로 파라미터를 전달하고 페이지가 열리게 됩니다.