React Native에서 터치 이벤트를 처리하는 방법 완벽 가이드

모바일 기기에서 UI와의 상호작용은 대부분 터치(Touch)나 탭(Tap)을 통해 이루어집니다. 앱을 사용할 때 우리는 버튼을 눌러 특정 동작을 실행하거나, 화면을 터치해 페이지를 스크롤하고, 손가락으로 확대·축소하는 등 다양한 제스처를 사용합니다.

React Native는 이러한 탭이나 터치 같은 제스처를 감지할 수 있는 이벤트와, 터치를 직접 다룰 수 있는 터치 가능(Touchable) 컴포넌트를 제공합니다.

먼저 버튼이 클릭되었을 때 어떤 일이 일어나는지 예제를 통해 살펴보겠습니다.

예제 1: 버튼 탭 처리하기

다음은 가장 기본적인 Button 컴포넌트의 예제입니다.

<Button
    onPress={() => {
        alert('You Tapped on Me!');
    }}
    title="Tap Me"
/>

사용자가 버튼을 탭하면 onPress 이벤트가 호출됩니다. 아래는 실제로 동작하는 전체 코드입니다.

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
    return (
        <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
                onPress={() => {
                    alert('You Tapped on Me!');
                }}
                title="Tap Me"
            />
        </View>
    );
}
export default App;

출력 결과

Touchable 컴포넌트란?

React Native의 터치 가능 컴포넌트는 버튼과 같은 컴포넌트에서 사용하는 onPress() 이벤트에 문제가 있거나, 더 세밀한 터치 제어가 필요할 때 탭 제스처를 감지하는 데 유용합니다.

터치 가능 컴포넌트에는 다음 세 가지 종류가 있으며, 각각 React Native 컴포넌트의 탭 제스처를 서로 다른 방식으로 처리합니다.

• TouchableOpacity – 터치 시 요소의 투명도(opacity)가 변함
• TouchableHighlight – 터치 시 요소가 어두워지며 배경색이 비침
• TouchableWithoutFeedback – 시각적 피드백 없이 터치 이벤트만 처리

TouchableOpacity

이 컴포넌트는 사용자가 요소를 터치했을 때 해당 요소의 투명도를 변경하여 시각적인 피드백을 줍니다.

사용 방법은 다음과 같습니다.

<TouchableOpacity onPress={() => alert('You Tapped Me')}>
    <Text style = {styles.text}>
        Button
    </Text>
</TouchableOpacity>

아래는 실제로 동작하는 전체 예제입니다.

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'

const App = () => {
    return (
        <View style = {styles.container}>
            <TouchableOpacity onPress={() => alert('You Tapped Me')}>
                <Text style = {styles.text}>
                    Button
                </Text>
            </TouchableOpacity>
        </View>
    )
}
export default App

const styles = StyleSheet.create ({
    container: {
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'red'
    }
});

사용자가 버튼을 터치하면 투명도가 변하는 것을 확인할 수 있습니다.

TouchableHighlight

이 컴포넌트는 사용자가 요소를 누르면 요소가 어두워지고 그 아래에 있는 배경색이 비쳐 보이는 효과를 냅니다.

사용하기 전에 먼저 아래와 같이 임포트해야 합니다.

import { TouchableHighlight } from 'react-native'

구조적으로는 Text 컴포넌트 안에 버튼 역할을 하는 내용을 넣고, 그 Text를 TouchableHighlight 컴포넌트로 감싸는 형태입니다. 각 컴포넌트에는 필요에 따라 스타일을 자유롭게 적용할 수 있습니다. onPress 함수는 TouchableHighlight에 지정하며, 탭하면 알림 메시지가 표시됩니다.

<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
    <Text style = {styles.text}>
        Button
    </Text>
</TouchableHighlight>

전체 동작 예제는 다음과 같습니다.

import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'

const App = (props) => {
    return (
        <View style = {styles.container}>
            <TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
                <Text style = {styles.text}>
                    Button
                </Text>
            </TouchableHighlight>
        </View>
    )
}
export default App

const styles = StyleSheet.create ({
    container: {
        padding:100,
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'gray'
    }
})

출력 결과

TouchableWithoutFeedback

이 컴포넌트는 터치 이벤트는 처리하되 별도의 시각적 피드백이 필요 없는 경우에 사용합니다. 예를 들어 화면의 빈 공간을 탭했을 때 키보드를 닫는 용도로 활용할 수 있습니다.

아래와 같이 Button을 TouchableWithoutFeedback 컴포넌트로 감싸서 사용합니다.

<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
    <Text style = {styles.text}>
        Button
    </Text>
</TouchableWithoutFeedback>

예제: TouchableWithoutFeedback 컴포넌트 활용하기

import React from 'react'
import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native'

const Home = (props) => {
    return (
        <View style = {styles.container}>
            <TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
                <Text style = {styles.text}>
                    Button
                </Text>
            </TouchableWithoutFeedback>
        </View>
    )
}
export default Home

const styles = StyleSheet.create ({
    container: {
        padding:100,
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'gray'
    }
})

출력 결과

마무리

React Native에서는 onPress 이벤트 하나만으로도 기본적인 탭 처리가 가능하지만, 상황에 따라 TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback 같은 터치 가능 컴포넌트를 활용하면 더욱 풍부하고 세밀한 사용자 경험을 구현할 수 있습니다. 각 컴포넌트의 피드백 방식 차이를 이해하고, 앱의 UX에 맞는 컴포넌트를 선택해 사용하는 것이 중요합니다.