코드노트

리액트 네이티브 TextInput 기능 정리, RN 본문

Code note/리액트

리액트 네이티브 TextInput 기능 정리, RN

코드노트 2024. 4. 17. 22:05

현제 사이드프로젝트로 간단한 앱을 만들면서 TextInput으로 회원가입, 로그인을 구현하였다.

기능들이 기존 html input태그와 많이 달랐고 사용할 수 있는 속성들도 많았던거 같다.

 

pwa도 진행을 해봤지만 역시 일반적으로 리액트로 진행하는것보다 네이티브가 좋은것 같다...

리액트 네이티브를 하면서 느낀거지면 모바일에 최적화되어있는것도 있지만

기본적으로 제공하는 속성들만 잘 활용하더라도 간단한 앱에서 사용하는것들은 구현하기가 쉬울것 같은 느낌..!

 

 

onChangeText: 텍스트가 변경될 때마다 호출되는 함수를 설정

placeholder: 입력 필드에 표시되는 텍스트를 설정

placeholderTextColor: placeholder 텍스트의 색상을 설정

editable: 사용자가 텍스트를 입력할 수 있는지 여부를 설정

keyboardType: 키보드 유형을 설정합니다 (예: default, email-address, numeric).

autoCapitalize: 자동 대문자 치환 기능을 설정 (예: none, sentences, words, characters).

autoCorrect: 자동 수정 기능을 설정

spellCheck: 맞춤법 검사 기능을 설정

secureTextEntry: 비밀번호 입력 필드처럼 텍스트를 마스킹 

maxLength: 입력 가능한 최대 문자 수를 설정

multiline: 여러 줄 입력을 허용

numberOfLines: 표시되는 최대 행 수를 설정

selectionColor: 선택된 텍스트의 배경색을 설정

clearTextOnFocus: 포커스가 있을때 텍스트 지움

returnKeyType: 엔터키 클릭 시 수행 작업 ( 키보드에 확인란에 보여지는 텍스트 ) (예: done, go, next, search 등)

 

 

이 외에도 다양한 기능들이 있고 세세하게 설정을 한다면 좋은 ux를 보여줄 수 있을것 같다!