리액트 네이티브 TextInput 컴포넌트 사용 방법

React-Native TextInput 사용 방법

• 대부분은 리액트와 동일하다. 단, onChangeText 를 사용하고, 모바일에 특화된 애트리뷰트들이 몇개 있다.
• 리액트와 동일하게 useState() 를 이용해 상태 변수와 상태 세팅 변수를 만들고 연결해주면 된다.
• useCallback() 내부에 onChangeText 시 발현할 이벤트에 대한 함수를 작성해주고 연결해주자.

코드 예제

// 콜백 함수 작성 예제
const onChangeEmail = useCallback((text: string) => {
  setEmail(text);
}, []);

const onChangePassword = useCallback((text: string) => {
  setPassword(text);
}, []);

// 콜백 엘리먼트 작성 예제
<TextInput
  style={styles.textInput}
  onChangeText={onChangeEmail} // 콜백 삽입
  value={email} // value 연결
  placeholder="이메일을 입력해주세요."
  autoComplete="email"
  textContentType="emailAddress"
/>

<TextInput
  secureTextEntry
  value={password}
  style={styles.textInput}
  onChangeText={onChangePassword}
  placeholder="비밀번호를 입력해주세요."
  textContentType="oneTimeCode"
/>

비밀번호 입력 전용 인풋창 만들기

secureTextEntry 속성을 추가하면 입력한 값이 모자이크된다.

IOS vs Android 주의사항

 

공식문서에서 초록 점은 안드로이드만 가능한 속성이고, 검은 점은 IOS 만 가능한 속성이다.

레퍼런스

https://reactnative.dev/docs/textinput#onchange