React Native에서 키보드 어보이딩(Keyboard Avoiding) 최적화하기

React Native에서 키보드 어보이딩(Keyboard Avoiding) 최적화하기

모바일 환경에서는 텍스트 입력을 받을 때 키보드가 화면을 가리는 문제가 자주 발생한다. 특히 React Native에서는 TextInput을 사용할 때 이 문제를 해결하기 위해 여러 접근 방식을 고려해야 한다. 이번 글에서는 키보드 어보이딩을 효과적으로 적용하는 방법을 정리해 본다.

---

1. KeyboardAvoidingView 사용하기

React Native에서 기본적으로 제공하는 KeyboardAvoidingView를 활용하면 키보드가 나타날 때 자동으로 레이아웃을 조정할 수 있다.

import React, { useState } from 'react';
import { View, TextInput, Button, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';

const KeyboardAvoidingExample = () => {
  const [text, setText] = useState('');

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // iOS는 padding, Android는 height
      style={{ flex: 1 }}
    >
      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', padding: 16 }}>
        <TextInput
          placeholder="입력하세요"
          value={text}
          onChangeText={setText}
          style={{
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            borderRadius: 8,
            backgroundColor: '#fff',
          }}
        />
        <Button title="완료" onPress={() => console.log(text)} />
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default KeyboardAvoidingExample;

KeyboardAvoidingView 속성

• behavior="padding" (iOS 권장)
  • 키보드가 나타나면, View의 padding을 조정하여 입력 필드가 가려지지 않도록 한다.
• behavior="height" (Android 권장)
  • 키보드 높이만큼 View의 높이를 조정하여 전체 레이아웃을 밀어 올린다.

이 방식은 간단하지만, KeyboardAvoidingView만으로 완벽하게 해결되지 않는 경우도 많다.

---

2. 키보드 닫기 기능 추가하기

화면의 빈 공간을 터치하면 키보드가 닫히도록 하는 것이 UX적으로 좋다. 이를 위해 TouchableWithoutFeedback을 활용할 수 있다.

import { Keyboard, TouchableWithoutFeedback } from 'react-native';

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()} accessible={false}>
    {children}
  </TouchableWithoutFeedback>
);

이제 DismissKeyboard 컴포넌트를 활용하면 모든 화면에서 쉽게 적용할 수 있다.

<DismissKeyboard>
  <KeyboardAvoidingExample />
</DismissKeyboard>

이렇게 하면 사용자가 입력 필드가 아닌 영역을 터치했을 때 키보드가 자동으로 내려가도록 만들 수 있다.

---

3. react-native-keyboard-aware-scroll-view 사용하기

KeyboardAvoidingView는 기본적인 기능은 제공하지만, 화면이 복잡할 경우 예상치 못한 동작이 발생할 수 있다. 이를 해결하기 위해 react-native-keyboard-aware-scroll-view 라이브러리를 활용하면 더 정교한 컨트롤이 가능하다.

설치

yarn add react-native-keyboard-aware-scroll-view

사용 예시

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const KeyboardAwareExample = () => {
  return (
    <KeyboardAwareScrollView contentContainerStyle={{ flexGrow: 1 }}>
      <TextInput placeholder="입력하세요" />
    </KeyboardAwareScrollView>
  );
};

이 라이브러리는 입력 필드가 화면 아래에 위치하더라도 자동으로 스크롤을 조정해 주기 때문에 보다 유연한 키보드 대응이 가능하다.

---

4. SafeAreaView와 함께 사용하기

iOS에서는 상단 상태바가 있는 환경에서 SafeAreaView를 함께 사용해야 키보드 어보이딩과 충돌이 발생하지 않는다.

import { SafeAreaView } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <KeyboardAwareExample />
  </SafeAreaView>
);

---

결론

React Native에서 키보드 어보이딩을 제대로 적용하려면 단순히 KeyboardAvoidingView만으로 해결되지 않는 경우가 많다.

• 기본적인 경우: KeyboardAvoidingView 사용
• 터치 시 키보드 닫기: DismissKeyboard 활용
• 복잡한 UI에서는: react-native-keyboard-aware-scroll-view 사용
• iOS에서는 **SafeAreaView**와 함께 사용

이런 방법들을 조합하면 보다 자연스럽고 안정적인 키보드 대응이 가능하다.
실제 프로젝트에서도 위 패턴을 활용해 더 나은 사용자 경험을 제공할 수 있을 것이다.