자주 사용하는 react-native 태그 알아보기 -TextInput(iOS)
나는 최근 한 두달 동안 리액트 네이티브를 활용해서 기능구현 및 코드를 작성한 경험이 있다.
그 기간 동안 자주 활용했던 태그들 중 TextInput에 대해 기록해보겠다.
<TextInput
style={styles.input}
placeholder="비밀번호"
secureTextEntry={true}
keyboardType="numbers-and-punctuation"
autoCapitalize="none"
maxLength={8}
value={pw}
onChangeText={(text) => setPw(text)}
/>내가 작성한 코드를 간단하게 설명해보자면,
style : input으로 변수명을 설정 후 작성한 스타일 코드
placeholder: input에 작성한 내용
autoCapitalize: 첫문자를 대문자를 설정할 지의 여부
maxLength: 최대 글자수 제한
그 외 설명은 아래에서 진행하겠다.
HTML의 input 과 같은 역할이며 리액트와 다른 점은 키보드 타입을 정할 수 있다는게 가장 큰 차이점이다.
1. keyboardType
이메일을 작성하는 인풋의 경우: keyboardType="email-address"
번호를 작성하는 인풋의 경우: keyboardType="Number-pad"
번호를 작성하는 인풋의 경우: keyboardType="URL"
2. securetextentry
이 경우는 불리언 값으로 지정할 수 있고 내가 작성한 예시 코드에서는 비밀번호라서 true라고 작성한 부분이다.
내가 알아본 부분에 의하면 HTML에서는 <input type=’password’ /> 와 같은 부분이라고 알고 있다.
3. onChangeText
보통 리액트나 HTML에서 input의 변화하는 값을 넣기 위해서 useState를 활용하여
onChange={(e)=>{setData(e.target.value)}}
를 사용한다. 하지만 리액트에서 그 코드를 그대로 활용하면 error를 뱉는다!
그래서 value를 설정한 후 onChangeText로 우리가 원하는 text를 집어 넣는다.
4. HTML 코드 작성
물론 이 부분은 TextInput에만 한정된 부분은 아니고 리액트 네이티브에서 전반적으로 HTML코드를 작성하면 이와 같이 에러를 뱉는다!
*참고자료