React Native에서 Text Input과 키보드 처리하기

 리액트 네이티브에서 텍스트 인풋(TextInput)은 사용자와 상호작용을 위한 가장 기본적인 요소 중 하나이다. 하지만, 텍스트 인풋을 사용할 때 키보드가 화면을 가리는 문제가 발생할 수 있어 이를 적절히 처리하는 방법을 알아두는 것이 중요하다. 이 글에서는 TextInput의 주요 속성과 키보드 처리 방법에 대해 설명하고, 예제 코드를 통해 적용 방식을 소개한다.

TextInput의 기본 사용법

 TextInput은 사용자의 입력을 받을 수 있는 기본 컴포넌트이다. 가장 기본적으로는 placeholder 속성을 사용해 입력 필드에 안내 문구를 넣을 수 있다.

<TextInput
  placeholder="여기에 입력하세요"
/>

이 코드는 간단하게 텍스트 입력을 받는 기본적인 텍스트 인풋 필드를 만들어준다.

유용한 TextInput 속성들

 TextInput에는 다양한 속성을 통해 사용성을 높일 수 있다. 몇 가지 중요한 속성을 살펴보자.

• keyboardType: 키보드의 타입을 지정할 수 있어 사용자가 입력해야 하는 내용에 맞는 키보드를 띄울 수 있다.

<TextInput
  placeholder="이메일 주소"
  keyboardType="email-address"
/>

 

 예를 들어, 이메일을 입력해야 하는 경우 keyboardType="email-address"를 사용해 이메일 입력에 적합한 키보드를 띄울 수 있다.

• secureTextEntry: 비밀번호 입력 시 텍스트를 숨기고 대신 ● 같은 기호로 표시해준다.

<TextInput
  placeholder="비밀번호"
  secureTextEntry={true}
/>

 

• autoCapitalize: 자동으로 대문자로 변환하는 방식을 설정할 수 있다.

<TextInput
  placeholder="이름"
  autoCapitalize="words"
/>

여기서 "words"를 사용하면 각 단어의 첫 글자가 자동으로 대문자로 변환된다.

• multiline: 여러 줄에 걸쳐 입력할 수 있도록 한다.

<TextInput
  placeholder="의견을 남겨주세요"
  multiline={true}
  numberOfLines={4}
/>

 이러한 속성들을 조합하여 사용하면 사용자 경험을 크게 개선할 수 있다.

입력 값 제어하기

 입력된 텍스트를 상태로 관리하여 제어할 수 있다. 이를 통해 사용자가 입력한 값을 실시간으로 처리할 수 있다.

const [text, setText] = useState('');

<TextInput
  placeholder="내용을 입력하세요"
  onChangeText={(value) => setText(value)}
  value={text}
/>

 onChangeText는 사용자가 입력할 때마다 호출되며, value는 현재 상태에 맞게 업데이트된다.

포커스 제어와 참조(ref) 사용

 ref를 사용하여 특정 TextInput에 포커스를 주거나 다른 입력 필드로 이동하는 작업을 할 수 있다. 예를 들어, 이메일 입력 후 다음 입력 필드로 자동으로 포커스를 이동시킬 수 있다.

const emailRef = useRef();
const passwordRef = useRef();

<TextInput
  placeholder="이메일"
  ref={emailRef}
  returnKeyType="next"
  onSubmitEditing={() => passwordRef.current.focus()}
/>
<TextInput
  placeholder="비밀번호"
  ref={passwordRef}
  secureTextEntry={true}
/>

키보드 처리하기

 모바일 화면에서 키보드가 나타날 때, 입력 필드가 키보드에 의해 가려지는 문제를 해결해야 한다. 이를 위해 다양한 방법을 사용할 수 있다.

KeyboardAvoidingView 사용

 KeyboardAvoidingView는 키보드가 화면에 나타날 때 자동으로 레이아웃을 조정해준다. 특히 iOS와 안드로이드에서의 동작을 다르게 설정할 수 있다.

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
  {/* 다른 UI 요소들 */}
</KeyboardAvoidingView>

ScrollView와 함께 사용하기

입력 필드가 많을 경우, ScrollView와 KeyboardAvoidingView를 함께 사용하여 화면을 스크롤할 수 있도록 해주면, 키보드가 나타날 때 자연스럽게 입력 필드를 보이게 할 수 있다.

<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
  <ScrollView>
    {/* 내용 */}
  </ScrollView>
</KeyboardAvoidingView>

 이때 ScrollView는 자식 컴포넌트들을 모두 렌더링하기 때문에 메모리와 성능면에서 안 좋을 수 있다. 따라서 리스트의 길이가 길어지면 FlatList나 SectionList를 사용하는 것이 좋다.

KeyboardAwareScrollView 사용

 react-native-keyboard-aware-scroll-view 라이브러리를 사용하면 키보드와의 상호작용을 보다 쉽게 처리할 수 있다. 이 라이브러리는 키보드가 나타날 때 자동으로 스크롤을 조정해준다.