TextInput
사용자로부터 텍스트를 입력받는 컴포넌트이다. 웹의 <input> 및 <textarea> 기능을 모두 담당한다. React의 State(useState)와 함께 사용하여 입력값을 제어하는 패턴(Controlled Component)을 주로 사용한다.
핵심 특징
- 이벤트 처리 차이 : 웹에서는 onChange를 쓰지만, React Native에서는 onChangeText를 주로 사용한다. 이 함수는 이벤트 객체(e)가 아니라 변경된 텍스트 문자열 그 자체를 인자로 준다.
- 키보드 제어 : 키보드의 종류(숫자판, 이메일 등)와 엔터키의 모양(검색, 전송 등)을 설정할 수 있다.
주요 Props
- value : 입력창에 표시될 현재 문자열 값이다. (State 변수와 연결)
- onChangeText : 텍스트가 변경될 때마다 실행되는 콜백 함수이다.
- placeholder : 입력하기 전에 보여줄 안내 문구이다.
- secureTextEntry : 비밀번호 입력처럼 글자를 점(•)으로 가려준다. (기본값 false)
- keyboardType : 키보드 종류를 설정한다.
- default : 기본 키보드
- numeric : 숫자 키패드 (소수점 없음)
- email-address : @ 키가 있는 이메일 전용 키보드
- phone-pad : 전화번호 입력용 키패드
- multiline : true로 설정하면 여러 줄 입력(textarea)이 가능해진다. 이때 secureTextEntry는 불가능해진다.
- autoCapitalize : 자동 대문자 변환 설정한다. (none, sentences, words, characters)아이디나 이메일 입력 시엔 보통 none으로 설정한다.
TextInput의 기본 상태 (스타일 0일 때)
- border : 없음 (borderWidth: 0)
- backgroundColor : 투명
- width : 부모 View의 너비를 따르지 않고 0에 가까움 (auto-sizing 안 됨)
- height : 한 줄일 때는 폰트 크기 정도, multiline이면 더 작아 보임
- padding : 기본 0
- placeholder 색상/스타일 : 기본 회색이지만 아주 연함
TextInput은 웹 input 처럼 기본 스타일이 거의 없다. 직접 width, height, border 등의 스타일을 넣어줘야 입력창처럼 보인다. 보통 border + background + padding 3가지만 넣어도 웹 input 느낌이 난다.
StatusBar
화면 맨 위, 시간, 배터리, 와이파이 아이콘 등이 표시되는 시스템 상태 바를 제어하는 컴포넌트다. 엄밀히 말하면 화면에 그림을 그리는 UI 컴포넌트라기보다는, 앱의 설정(Config)을 바꾸는 컨트롤러에 가깝다.
핵심 특징
-
Edge-to-Edge (엣지 투 엣지) : Android(특히 15버전 타겟팅)와 React Native 0.74 이상에서는 앱이 화면 전체(상태 바 뒤까지)를 쓰는 Edge-to-Edge가 기본 표준이 되어가고 있다. 그래서 예전처럼 상태 바 영역이 딱딱하게 나뉘지 않고, 투명하게 처리되는 게 기본 동작으로 변하는 추세이다.
-
스택(Stack) 구조 : 앱의 여러 곳에서 StatusBar를 동시에 쓰면, 가장 나중에 렌더링 된(가장 위에 있는) 컴포넌트의 설정이 적용된다.
-
플랫폼별 동작 : iOS와 Android의 처리 방식이 다른데, 최근에는 두 플랫폼 모두 "투명한 배경 + 콘텐츠가 위로 올라감" 형태로 통일되는 경향이 있다.
주요 Props
- barStyle : 상태 바의 글씨와 아이콘 색상을 결정한다.
- 'default': 시스템 기본 (보통 검은 글씨, 다크모드에선 흰 글씨)
- 'light-content' : 흰색 글씨. 배경이 어두울 때 쓴다.
- 'dark-content' : 검은색 글씨. 배경이 밝을 때 쓴다.
- translucent (Android 전용) : true로 설정하면 상태 바가 반투명해지면서, 앱의 콘텐츠가 상태 바 뒤쪽 영역까지 올라가서 그려진다. (전체 화면 디자인할 때 필수다.)
- hidden : true면 상태 바를 아예 숨겨버린다. (게임이나 전체 화면 영상 볼 때 사용)
- translucent (Android 전용) : true로 설정하면 상태 바가 반투명해지면서, 앱의 콘텐츠가 상태 바 뒤쪽 영역까지 올라가서 그려진다. (전체 화면 디자인할 때 필수다.)
- hidden: true면 상태 바를 아예 숨겨버린다. (게임이나 전체 화면 영상 볼 때 사용)
ScrollView
화면 영역보다 내용이 더 길어질 때, 사용자가 위아래(혹은 좌우)로 스크롤 할 수 있게 만들어주는 컨테이너 컴포넌트다. View는 내용이 넘치면 그냥 잘려 보이지만, ScrollView는 스크롤이 생긴다. 내부에 포함된 모든 자식 컴포넌트를 한 번에 렌더링한다. 화면에 안 보이는 아래쪽 내용까지 미리 다 그려놓는다는 뜻이다.
핵심 특징
- 적은 양의 데이터에 적합 : 아이템 개수가 적거나(설정 화면, 약관 동의 등), 길이가 고정된 화면에 쓴다.
- 스타일링의 분리 : 스크롤 뷰 자체의 껍데기와, 스크롤 되는 알맹이의 스타일을 따로 관리해야 한다. (이게 가장 많이 헷갈리는 부분이다.)
- FlatList와의 차이 : 데이터가 수백, 수천 개가 넘어가면 ScrollView는 메모리가 터지거나 앱이 느려진다. 이때는 화면에 보이는 것만 그리는 FlatList를 써야 한다.
주요 Props
-
contentContainerStyle (매우 중요)
- ScrollView 자체의 크기나 위치는 style에 적지만, 안쪽 내용물의 패딩(padding)이나 정렬(alignItems)은 반드시 여기에 적어야 한다.
- 스크롤 되는 내용 전체에 여백을 주고 싶다면 style이 아니라 여기에 padding을 줘야 한다.
-
horizontal : true로 설정하면 가로로 스크롤 된다. (기본값은 false인 세로 스크롤이다.)
-
showsVerticalScrollIndicator : 스크롤 바(오른쪽 막대)를 보여줄지 결정한다. 디자인 때문에 보통 false로 많이 숨긴다.
-
refreshControl : 당겨서 새로고침 기능을 붙일 때 사용한다.
<RefreshControl />컴포넌트를 연결해 줘야 한다. -
keyboardShouldPersistTaps : 키보드가 올라와 있을 때 스크롤 뷰를 터치하면 키보드가 내려갈지 말지를 정한다.
- 'handled' : 버튼 같은 걸 누르면 키보드는 내려가지 않고 버튼 동작이 실행된다. 이 값이 권장한다.
- nestedScrollEnabled (Android only)
Android에서 ScrollView가 중첩될 때 내부 스크롤이 제스처를 가져갈 수 있게 허용하는 prop이다.
예를 들어 세로 ScrollView 안에 가로 ScrollView가 있는 경우, Android에서는 기본적으로 부모가 터치 이벤트를 가로채서 내부 스크롤이 안 먹힌다. 이뙤 nestedScrollEnabled={true}를 내부 ScrollView에 주면 해결된다.
-
stickyHeaderIndices
ScrollView의 자식 중 특정 인덱스의 컴포넌트를 스크롤 시 상단에 고정시키는 prop이다. 숫자 배열을 받는다.
<ScrollView stickyHeaderIndices={[0, 3]}>
<SectionHeader title="추천" /> {/* index 0 → sticky */}
<ItemA /> {/* index 1 */}
<ItemB /> {/* index 2 */}
<SectionHeader title="인기" /> {/* index 3 → sticky */}
<ItemC /> {/* index 4 */}
</ScrollView>스크롤하면 "추천" 헤더가 상단에 붙어 있다가, "인기" 헤더가 올라오면 밀어내고 교체된더. 연락처 앱의 알파벳 섹션 헤더 같은 UX이다.
실무에서는 탭바나 필터 바를 스크롤 중 고정시킬 때도 많이 쓴다. stickyHeaderIndices={[0]}으로 첫 번째 자식만 고정하는 패턴이 흔하다.
