TouchableWithoutFeedback

더 확장성 있고 미래 지향적인 터치 기반 입력 처리 방법을 찾고 있다면, Pressable API를 확인해 보길 바란다.

매우 특별한 이유가 없다면 사용하지 않는 것이 좋다. 터치에 반응하는 모든 엘리먼트는 터치 시 시각적 피드백을 제공해야 한다.

TouchableWithoutFeedback는 단 하나의 자식 엘리먼트만 지원한다. 여러 자식 컴포넌트를 사용하려면 View로 감싸야 한다. 중요한 점은, TouchableWithoutFeedback가 자식 엘리먼트를 복제하고 응답자 속성을 적용하는 방식으로 동작한다는 것이다. 따라서 중간에 있는 컴포넌트들은 이러한 속성을 하위 React Native 컴포넌트로 전달해야 한다.

사용 패턴

tsx
function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;

참조

Props

`accessibilityIgnoresInvertColors`
iOS

색상 반전 기능이 활성화되었을 때, 이 뷰가 반전되어야 하는지 여부를 나타내는 값이다. true로 설정하면, 색상 반전 기능이 켜져 있어도 이 뷰는 반전되지 않는다.

자세한 내용은 접근성 가이드를 참조한다.

타입
Boolean

`accessible`

true로 설정하면 해당 뷰가 접근성 엘리먼트임을 나타낸다. 기본적으로 모든 터치 가능한 엘리먼트는 접근성을 갖는다.

타입
bool

`accessibilityLabel`

사용자가 엘리먼트와 상호작용할 때 스크린 리더가 읽을 텍스트를 직접 지정한다. 기본적으로 라벨은 모든 자식 엘리먼트를 탐색하고 공백으로 구분된 Text 노드를 모아 자동으로 생성된다.

타입
string

`accessibilityLanguage`
iOS

사용자가 엘리먼트와 상호작용할 때 스크린 리더가 사용해야 하는 언어를 지정하는 값이다. 이 값은 BCP 47 사양을 따라야 한다.

자세한 내용은 iOS accessibilityLanguage 문서를 참고한다.

타입
string

`accessibilityHint`

접근성 힌트는 사용자가 접근성 엘리먼트에 대해 어떤 동작을 수행했을 때 어떤 결과가 발생할지 이해하도록 돕는다. 이는 접근성 레이블만으로는 명확하지 않은 경우에 특히 유용하다.

타입
string

`accessibilityRole`

accessibilityRole은 보조 기술 사용자에게 컴포넌트의 목적을 전달한다.

accessibilityRole은 다음 중 하나가 될 수 있다:

'none' - 엘리먼트가 역할을 가지지 않을 때 사용한다.
'button' - 엘리먼트를 버튼으로 취급해야 할 때 사용한다.
'link' - 엘리먼트를 링크로 취급해야 할 때 사용한다.
'search' - 텍스트 필드 엘리먼트를 검색 필드로도 취급해야 할 때 사용한다.
'image' - 엘리먼트를 이미지로 취급해야 할 때 사용한다. 예를 들어 버튼이나 링크와 결합할 수 있다.
'keyboardkey' - 엘리먼트가 키보드 키 역할을 할 때 사용한다.
'text' - 엘리먼트를 변경할 수 없는 정적 텍스트로 취급해야 할 때 사용한다.
'adjustable' - 엘리먼트가 조절 가능할 때 사용한다 (예: 슬라이더).
'imagebutton' - 엘리먼트를 버튼으로 취급해야 하며 동시에 이미지일 때 사용한다.
'header' - 엘리먼트가 콘텐츠 섹션의 헤더 역할을 할 때 사용한다 (예: 네비게이션 바의 제목).
'summary' - 앱이 처음 실행될 때 현재 상태를 빠르게 요약하는 데 사용할 수 있는 엘리먼트일 때 사용한다.
'alert' - 엘리먼트가 사용자에게 중요한 텍스트를 포함하고 있을 때 사용한다.
'checkbox' - 엘리먼트가 체크박스를 나타낼 때 사용한다. 체크박스는 체크, 언체크, 혹은 혼합 상태일 수 있다.
'combobox' - 엘리먼트가 콤보 박스를 나타낼 때 사용한다. 콤보 박스는 사용자가 여러 선택지 중 하나를 선택할 수 있게 한다.
'menu' - 컴포넌트가 선택지 메뉴일 때 사용한다.
'menubar' - 컴포넌트가 여러 메뉴의 컨테이너일 때 사용한다.
'menuitem' - 메뉴 내의 항목을 나타낼 때 사용한다.
'progressbar' - 작업의 진행 상태를 나타내는 컴포넌트일 때 사용한다.
'radio' - 라디오 버튼을 나타낼 때 사용한다.
'radiogroup' - 라디오 버튼 그룹을 나타낼 때 사용한다.
'scrollbar' - 스크롤 바를 나타낼 때 사용한다.
'spinbutton' - 선택지 목록을 열 수 있는 버튼을 나타낼 때 사용한다.
'switch' - 켜고 끌 수 있는 스위치를 나타낼 때 사용한다.
'tab' - 탭을 나타낼 때 사용한다.
'tablist' - 탭 목록을 나타낼 때 사용한다.
'timer' - 타이머를 나타낼 때 사용한다.
'toolbar' - 툴바를 나타낼 때 사용한다 (액션 버튼이나 컴포넌트의 컨테이너).

타입
string

`accessibilityState`

컴포넌트의 현재 상태를 보조 기술 사용자에게 설명한다.

자세한 내용은 접근성 가이드를 참고한다.

타입
객체: `{disabled: bool, selected: bool, checked: bool 또는 'mixed', busy: bool, expanded: bool}`

`accessibilityActions`

접근성 액션은 보조 기술이 컴포넌트의 동작을 프로그래밍 방식으로 실행할 수 있게 한다. accessibilityActions 속성은 액션 객체의 리스트를 포함해야 한다. 각 액션 객체는 name과 label 필드를 포함해야 한다.

자세한 내용은 접근성 가이드를 참고한다.

타입
배열

`aria-busy`

이 속성은 엘리먼트가 수정 중임을 나타내며, 보조 기술(assistive technology)이 변경이 완료될 때까지 기다린 후 사용자에게 업데이트를 알릴 수 있도록 한다.

타입	기본값
boolean	false

`aria-checked`

체크 가능한 엘리먼트의 상태를 나타낸다. 이 속성은 불리언(boolean) 값이나 "mixed" 문자열을 사용해 혼합된 체크박스를 표현할 수 있다.

타입	기본값
boolean, 'mixed'	false

`aria-disabled`

해당 엘리먼트가 인식 가능하지만 비활성화되어 있음을 나타낸다. 따라서 편집하거나 조작할 수 없다.

타입	기본값
boolean	false

`aria-expanded`

확장 가능한 엘리먼트가 현재 확장되었는지 축소되었는지를 나타낸다.

타입	기본값
boolean	false

`aria-hidden`

이 속성은 접근성 엘리먼트 내부의 접근성 요소들이 숨겨져 있는지 여부를 나타낸다.

예를 들어, 형제 뷰 A와 B를 포함하는 윈도우에서 뷰 B에 aria-hidden을 true로 설정하면, VoiceOver가 뷰 B 내부의 엘리먼트들을 무시한다.

타입	기본값
boolean	false

`aria-label`

상호작용 가능한 엘리먼트에 대한 레이블 역할을 하는 문자열 값을 정의한다.

타입
string

`aria-live`
Android

엘리먼트가 업데이트될 것임을 나타내며, 사용자 에이전트, 보조 기술, 사용자가 라이브 영역에서 어떤 업데이트를 기대할 수 있는지 설명한다.

off 접근성 서비스는 이 뷰의 변경 사항을 알리지 않아야 한다.
polite 접근성 서비스는 이 뷰의 변경 사항을 알려야 한다.
assertive 접근성 서비스는 진행 중인 음성을 중단하고 즉시 이 뷰의 변경 사항을 알려야 한다.

타입	기본값
enum(`'assertive'`, `'off'`, `'polite'`)	`'off'`

`aria-modal`
iOS

VoiceOver가 해당 엘리먼트의 형제 뷰 내부의 엘리먼트들을 무시해야 하는지 여부를 나타내는 불리언 값이다. 이 속성은 accessibilityViewIsModal 속성보다 우선순위가 높다.

타입	기본값
boolean	false

`aria-selected`

선택 가능한 엘리먼트가 현재 선택되었는지 여부를 나타낸다.

타입
boolean

`onAccessibilityAction`

사용자가 접근성 동작을 수행할 때 호출된다. 이 함수는 수행할 동작의 이름을 포함한 이벤트 객체를 유일한 인자로 받는다.

자세한 내용은 접근성 가이드를 참고한다.

타입
function

`accessibilityValue`

컴포넌트의 현재 값을 나타낸다. 컴포넌트 값에 대한 텍스트 설명일 수도 있고, 슬라이더나 프로그레스 바 같은 범위 기반 컴포넌트의 경우 범위 정보(최소값, 현재값, 최대값)를 포함할 수 있다.

자세한 내용은 접근성 가이드를 참고한다.

타입
object: `{min: number, max: number, now: number, text: string}`

`aria-valuemax`

범위 기반 컴포넌트(예: 슬라이더, 진행률 표시기)에서 최대값을 나타낸다. accessibilityValue 프로퍼티의 max 값보다 우선순위가 높다.

타입
number

`aria-valuemin`

범위 기반 컴포넌트(예: 슬라이더, 진행 표시줄)의 최소값을 나타낸다. accessibilityValue prop의 min 값보다 우선순위가 높다.

타입
number

`aria-valuenow`

범위 기반 컴포넌트(예: 슬라이더, 진행률 표시기)의 현재 값을 나타낸다. accessibilityValue prop의 now 값보다 우선순위를 가진다.

타입
number

`aria-valuetext`

컴포넌트의 텍스트 설명을 나타낸다. accessibilityValue prop의 text 값보다 우선순위를 가진다.

타입
string

`delayLongPress`

onPressIn 이벤트 발생 후 onLongPress 가 호출되기까지의 지연 시간(밀리초 단위)을 설정한다.

타입
number

`delayPressIn`

터치가 시작된 후 onPressIn이 호출되기까지의 지연 시간(밀리초 단위)을 설정한다.

타입
number

`delayPressOut`

터치를 놓은 후 onPressOut이 호출되기까지의 지연 시간(밀리초 단위)을 설정한다.

타입
number

`disabled`

이 값을 true로 설정하면 해당 컴포넌트의 모든 상호작용을 비활성화한다.

타입
bool

`hitSlop`

이 속성은 버튼에서 얼마나 멀리 떨어진 곳에서 터치를 시작할 수 있는지 정의한다. 버튼에서 벗어날 때 pressRetentionOffset에 추가된다.

터치 영역은 부모 뷰의 경계를 넘어서지 않는다. 또한 두 개의 겹치는 뷰에 터치가 동시에 닿을 경우, 형제 뷰의 Z-index가 우선 적용된다.

타입
Rect 또는 숫자

`id`

이 속성은 네이티브 코드에서 이 뷰를 찾는 데 사용한다. nativeID 속성보다 우선순위가 높다.

타입
string

`onBlur`

해당 항목이 포커스를 잃을 때 호출된다.

타입
function

`onFocus`

아이템이 포커스를 받을 때 호출된다.

타입
function

`onLayout`

마운트 시점과 레이아웃 변경 시 호출된다.

타입
`({nativeEvent: LayoutEvent}) => void`

`onLongPress`

onPressIn 이후 370밀리초 이상 지속될 때 호출된다. 이 시간은 delayLongPress를 통해 사용자 정의가 가능하다.

타입
function

`onPress`

터치 동작이 취소되지 않고 해제될 때 호출된다. 예를 들어, 스크롤 동작으로 인해 응답자 잠금이 해제되는 경우에는 호출되지 않는다. 첫 번째 인자로 PressEvent 형태의 이벤트 객체가 전달된다.

타입
function

`onPressIn`

터치 가능한 엘리먼트가 눌리는 즉시 호출되며, onPress보다 먼저 실행된다. 네트워크 요청을 보낼 때 유용하게 사용할 수 있다. 첫 번째 함수 인자는 PressEvent 형태의 이벤트 객체이다.

타입
function

`onPressOut`

터치가 해제되는 즉시 호출되며, onPress보다 먼저 실행된다. 첫 번째 인자로 PressEvent 형태의 이벤트 객체가 전달된다.

타입
function

`pressRetentionOffset`

스크롤 뷰가 비활성화된 상태에서, 이 옵션은 버튼이 비활성화되기 전에 터치가 버튼에서 얼마나 벗어날 수 있는지를 정의한다. 버튼이 비활성화된 후, 다시 버튼으로 이동하면 버튼이 다시 활성화되는 것을 확인할 수 있다! 스크롤 뷰가 비활성화된 상태에서 여러 번 앞뒤로 이동해 보자. 메모리 할당을 줄이기 위해 상수를 전달해야 한다.

타입
Rect 또는 숫자

`nativeID`

타입
string

`testID`

엔드투엔드 테스트에서 이 뷰를 찾는 데 사용한다.

타입
string

`touchSoundDisabled`
Android

true로 설정하면 터치 시 시스템 사운드를 재생하지 않는다.

타입
Boolean

사용 패턴​

참조

Props​

accessibilityIgnoresInvertColors iOS​

accessible​

accessibilityLabel​

accessibilityLanguage iOS​

accessibilityHint​

accessibilityRole​

accessibilityState​

accessibilityActions​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-hidden​

aria-label​

aria-live Android​

aria-modal iOS​

aria-selected​

onAccessibilityAction​

accessibilityValue​

aria-valuemax​

aria-valuemin​

aria-valuenow​

aria-valuetext​

delayLongPress​

delayPressIn​

delayPressOut​

disabled​

hitSlop​

id​

onBlur​

onFocus​

onLayout​

onLongPress​

onPress​

onPressIn​

onPressOut​

pressRetentionOffset​

nativeID​

testID​

touchSoundDisabled Android​

사용 패턴

Props

`accessibilityIgnoresInvertColors`
iOS

`accessible`

`accessibilityLabel`

`accessibilityLanguage`
iOS

`accessibilityHint`

`accessibilityRole`

`accessibilityState`

`accessibilityActions`

`aria-busy`

`aria-checked`

`aria-disabled`

`aria-expanded`

`aria-hidden`

`aria-label`

`aria-live`
Android

`aria-modal`
iOS

`aria-selected`

`onAccessibilityAction`

`accessibilityValue`

`aria-valuemax`

`aria-valuemin`

`aria-valuenow`

`aria-valuetext`

`delayLongPress`

`delayPressIn`

`delayPressOut`

`disabled`

`hitSlop`

`id`

`onBlur`

`onFocus`

`onLayout`

`onLongPress`

`onPress`

`onPressIn`

`onPressOut`

`pressRetentionOffset`

`nativeID`

`testID`

`touchSoundDisabled`
Android