[RN] TextInput

useState를 만들어주고

 

누군가 work text를 누르면 work 함수를 호출하고, travel text를 누르면 travel함수를 호출해준다.

이때 사용되는 props가 onPress이다!

 

 

 

스프레드 연산자를 통해 button text의 모든 style을 가져온다.  그리고 내가 요소를 추가한다면 ...을 통해 요소 추가도 가능하다. 위에 사진은 스프레드 연산자를 통해 color라는 요소를 추가한 것이다!

 

참고로 styles에는

color와 관련된 속성이 없다. 

 

만약 working한다면 color를 white로 working이 false면 grey를 칠해준다. travel의 경우 반대로 설정해주면 된다! 

 

 

text Input

RN은 HTML,CSS처럼 text area가 없다. 대신 text Input이 있다.!!

 

 

useState를 통해 working 변수가 true이면 그때는 work에 해당하는 것이기에 Add a To Do를 하고, working 변수가 false이면 그때는 travel에 해당하는 것이기에 Where do you want to go를 띄운다. 

 

 

onFocus --> Focus는 화면을 터치하면 쓸 준비가 된 상태를 말한다. 

onChangeText --> 우리가 입력한 Text를 받을 수 있다.

keyboardType --> 유저가 전화번호(숫자판)나 이메일(골뱅이 생김)을 입력할 때 키보드 타입을 바꿀 수 있게 해준다.

returnKeyType --> return의 모양을 바꿀 수 있다. 

returnKeyType을 send로 설정해주면 

 

여기에 전송이라는 버튼이 생긴 것을 볼 수 있다..!

 

secureTextEntry --> 비밀번호 같이 중요한 정보를 입력할 때 사용하는 props이다.

multiline --> 한줄 이상 쓰는 경우 사용하면 된다. multiline이 아니라면 한줄로만 써진다.

 

 

onChangeText

 

텍스트가 어떻게 써졌는지 확인할 수 있는 함수이다. 

내가 Marvel이라는 단어를 text Input에 쓰면 바로바로 감지한다.