TextInput 컴포넌트의 placeholder는 컴포넌트에 아무것도 입력하지 않았을 때 보여줄 기본 텍스트입니다. 사용자 입력에 대한 일종의 도움말인 셈입니다.

추가로 스타일 코드를 수정했습니다. paddingHorizontal이라는 속성을 block에 적용했는데요. 좌우측 padding 값을 설정하겠다는 의미입니다. 즉, 다음 코드와 동일해요.

paddingLeft: 16,
paddingRight: 16

input 부분의 스타일에는 paddingVertical이라는 속성을 설정했는데, 위 아래 padding을 주어진 값으로 설정하겠다는 의미입니다. 즉, 다음 코드와 동일합니다.

paddingTop: 16,
paddingBottom: 16

input의 padding은 화면에 보이지 않는 영역인데 왜 설정했을까요? 그 이유는 바로 터치 영역을 늘리기 위해서입니다. 만약 이를 설정하지 않았다면 텍스트가 있는 곳을 정확히 터치해야 입력을 시작할 수 있습니다. 하지만 이렇게 padding을 설정하면 터치 위치가 텍스트에서 조금 빗나가도 입력을 시작할 수 있습니다.

▲ 그림 3-29 TextInput