Multiline TextInput 자동 높이 확장 트러블슈팅

목표

제목 입력 TextInput에서:

• 스크롤 비활성화 (scrollEnabled={false})
• 텍스트가 다음 줄로 넘어가면 TextInput 높이가 자동으로 확장

환경

• React Native (Expo)
• iOS 시뮬레이터에서 테스트
• 한글 + 영어 입력

시도한 방법과 결과

1. multiline + scrollEnabled={false} (uncontrolled)

<TextInput
  multiline
  scrollEnabled={false}
  onChangeText={handleTitleChange}
/>

결과: 한글 텍스트가 다음 줄로 넘어가지 않음. 영어는 단어 단위로 줄바꿈되지만 한글은 줄바꿈 없이 한 줄에 계속 입력됨.

2. lineBreakStrategyIOS="hangul-word" 추가

<TextInput
  multiline
  scrollEnabled={false}
  lineBreakStrategyIOS="hangul-word"
/>

결과: 효과 없음. 여전히 한글 줄바꿈 안 됨.

3. onContentSizeChange로 수동 높이 조절

const [titleHeight, setTitleHeight] = useState(0);

<TextInput
  multiline
  scrollEnabled={false}
  style={{ height: titleHeight || undefined }}
  onContentSizeChange={(e) => {
    setTitleHeight(e.nativeEvent.contentSize.height);
  }}
/>

결과: 줄바꿈 자체가 안 되므로 contentSize.height가 변하지 않아 높이도 안 늘어남. contentSize.height에 padding이 포함되지 않아 높이 계산도 부정확.

4. controlled input (value prop 추가)

<TextInput
  value={title}
  onChangeText={handleTitleChange}
  multiline
  scrollEnabled={false}
/>

결과: 줄바꿈은 발생하나, 현재 줄이 완전히 꽉 찰 때까지 다음 줄이 보이지 않음. 높이 확장이 늦게 반영됨.

5. scrollEnabled 제거 (기본값 true)

<TextInput
  value={title}
  onChangeText={handleTitleChange}
  multiline
/>

결과: 줄바꿈 + 높이 확장 정상 동작. 그러나 ScrollView 안에서 TextInput 내부 스크롤과 충돌하여 입력 중 위아래 흔들림(jittering) 발생.

6. lineHeight 명시 + 줄 수 기반 높이 계산

// style
{ lineHeight: 26 }

// height 계산
height: titleLines * 26 + padding

결과: scrollEnabled={false}와 조합 시 여전히 줄바꿈 안 됨. scrollEnabled 제거 시 onContentSizeChange가 제대로 발화하지 않아 높이 안 늘어남.

7. multiline + scrollEnabled={false} + blurOnSubmit (최종 해결)

<TextInput
  value={title}
  onChangeText={handleTitleChange}
  multiline
  scrollEnabled={false}
  blurOnSubmit
  style={{ lineHeight: 26 }}
/>

결과: 한글/영어 모두 정상 줄바꿈 + 자동 높이 확장 + 흔들림 없음.

최종 해결책

<TextInput
  style={[styles.titleInput, { color: colors.text.primary }]}
  value={title}
  onChangeText={handleTitleChange}
  placeholder="제목을 입력해주세요."
  placeholderTextColor={colors.text.tertiary}
  maxLength={TITLE_MAX_LENGTH}
  multiline
  scrollEnabled={false}
  blurOnSubmit
  accessibilityLabel="질문 제목"
/>

핵심 props 조합

Prop	역할
multiline	여러 줄 입력 활성화
scrollEnabled={false}	내부 스크롤 비활성화 → 높이 자동 확장 + ScrollView 충돌 방지
blurOnSubmit	내부 텍스트 레이아웃 계산 방식 변경 → scrollEnabled={false}에서 줄바꿈 정상 동작
value (controlled)	상태 동기화
lineHeight: 26	줄 높이 명시로 레이아웃 계산 정확도 향상

왜 blurOnSubmit이 핵심인가

multiline TextInput에서 blurOnSubmit을 설정하면 리턴키가 줄바꿈 대신 키보드 dismiss로 동작하도록 변경된다. 이 과정에서 iOS 네이티브 단의 텍스트 레이아웃 계산 방식이 달라지며, scrollEnabled={false}와 함께 사용할 때 텍스트 줄바꿈 및 높이 자동 확장이 정상 동작하게 된다.

주의사항

• blurOnSubmit을 사용하면 엔터키로 줄바꿈을 할 수 없음 (제목 입력에는 적합)
• 본문처럼 엔터키 줄바꿈이 필요한 경우에는 이 방식 사용 불가
• iOS 특화 이슈이므로 Android에서는 동작이 다를 수 있음