Skip to main content
Version: Next

터치 이벤트 다루기

사용자는 주로 터치를 통해 모바일 앱과 상호작용한다. 버튼을 탭하거나, 리스트를 스크롤하거나, 지도를 확대하는 등 다양한 제스처를 조합해서 사용할 수 있다. React Native는 이러한 일반적인 제스처를 처리할 수 있는 컴포넌트를 제공하며, 더 복잡한 제스처 인식을 위한 제스처 응답 시스템도 갖추고 있다. 하지만 가장 기본적이면서도 자주 사용하게 될 컴포넌트는 바로 Button이다.

기본 버튼 표시하기​

Button 컴포넌트는 모든 플랫폼에서 잘 렌더링되는 기본 버튼을 제공한다. 버튼을 표시하는 가장 간단한 예제는 다음과 같다:

tsx
<Button
  onPress={() => {
    console.log('You tapped the button!');
  }}
  title="Press Me"
/>

이 코드는 iOS에서는 파란색 레이블로, Android에서는 연한 텍스트가 있는 파란색 둥근 사각형으로 렌더링된다. 버튼을 누르면 "onPress" 함수가 호출되어 알림 팝업을 표시한다. 원한다면 "color" 속성을 지정해 버튼의 색상을 변경할 수 있다.

아래 예제를 통해 Button 컴포넌트를 직접 사용해 볼 수 있다. 오른쪽 하단의 토글을 클릭해 앱을 미리 볼 플랫폼을 선택한 후, "Tap to Play"를 클릭해 앱을 미리 볼 수 있다.

터치 가능한 컴포넌트​

기본 버튼이 앱에 적합하지 않다면, React Native가 제공하는 "Touchable" 컴포넌트를 사용해 직접 버튼을 만들 수 있다. "Touchable" 컴포넌트는 탭 제스처를 감지하고, 제스처가 인식되면 피드백을 표시하는 기능을 제공한다. 하지만 이 컴포넌트들은 기본 스타일을 제공하지 않기 때문에, 앱에서 보기 좋게 만드려면 약간의 작업이 필요하다.

어떤 "Touchable" 컴포넌트를 사용할지는 원하는 피드백 유형에 따라 결정된다:

  • 일반적으로 웹에서 버튼이나 링크를 사용하는 곳이라면 TouchableHighlight를 사용할 수 있다. 사용자가 버튼을 누르면 뷰의 배경이 어두워진다.

  • Android에서는 TouchableNativeFeedback를 사용해 사용자의 터치에 반응하는 잉크 표면 반응을 표시할 수 있다.

  • TouchableOpacity는 버튼의 불투명도를 줄여 피드백을 제공한다. 사용자가 버튼을 누르는 동안 배경이 보이도록 한다.

  • 탭 제스처를 처리하지만 피드백을 표시하고 싶지 않다면 TouchableWithoutFeedback를 사용한다.

경우에 따라 사용자가 뷰를 일정 시간 동안 길게 누르는 것을 감지해야 할 수 있다. 이러한 길게 누르기 동작은 "Touchable" 컴포넌트의 onLongPress 프로퍼티에 함수를 전달해 처리할 수 있다.

이제 이 모든 것을 실제로 확인해 보자:

스크롤과 스와이프​

터치 스크린 기기에서 자주 사용되는 제스처로는 스와이프와 팬이 있다. 사용자는 이러한 제스처를 이용해 아이템 목록을 스크롤하거나 콘텐츠 페이지를 넘길 수 있다. 이러한 기능을 구현할 때는 ScrollView 코어 컴포넌트를 활용하면 된다.

알려진 문제​

  • react-native#29308: 터치 영역이 부모 뷰의 경계를 넘어가지 않으며, 안드로이드에서는 음수 마진을 지원하지 않는다.