TouchableWithoutFeedback

더 포괄적이고 미래 지향적인 터치 기반 입력 처리 방법을 원한다면 Pressable API를 확인해 보자. 특별한 이유가 없다면 사용하지 않는 것이 좋다. 터치에 반응하는 모든 엘리먼트는 터치 시 시각적 피드백을 제공해야 한다.

TouchableWithoutFeedback는 단 하나의 자식만 지원한다. 여러 자식 컴포넌트를 사용하려면 View로 감싸야 한다. 중요한 점은 TouchableWithoutFeedback가 자식을 복제하고 해당 자식에 responder props를 적용한다는 것이다. 따라서 중간 컴포넌트는 이러한 props를 기본 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 속성은 액션 객체들의 리스트를 포함해야 한다. 각 액션 객체는 필드 이름과 라벨을 포함해야 한다.

더 자세한 정보는 접근성 가이드를 참고한다.

타입
배열

aria-busy

aria-busy는 현재 엘리먼트가 수정 중임을 나타내며, 보조 기술이 변경이 완료될 때까지 기다린 후 사용자에게 업데이트를 알려야 할 수 있음을 의미한다.

타입	기본값
boolean	false

aria-checked

체크 가능한 엘리먼트의 상태를 나타낸다. 이 필드는 불리언 값이나 "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

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

• off: 접근성 서비스가 이 뷰의 변경 사항을 알리지 않는다.
• polite: 접근성 서비스가 이 뷰의 변경 사항을 알린다.
• assertive: 접근성 서비스가 진행 중인 발화를 중단하고 즉시 이 뷰의 변경 사항을 알린다.

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

aria-modal

iOS

VoiceOver가 수신자와 동일한 레벨의 형제 뷰에 있는 엘리먼트들을 무시해야 하는지를 나타내는 불리언 값이다. accessibilityViewIsModal 프로퍼티보다 우선순위가 높다.

타입	기본값
boolean	false

aria-selected

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

타입
boolean

onAccessibilityAction

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

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

타입
function

accessibilityValue

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

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

타입
객체: {min: number, max: number, now: number, text: string}

aria-valuemax

슬라이더나 진행률 표시줄과 같은 범위 기반 컴포넌트의 최대값을 나타낸다. accessibilityValue prop의 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

타입
문자열

testID

이 값은 엔드투엔드 테스트에서 해당 뷰를 식별하는 데 사용된다.

타입
string

touchSoundDisabled

Android

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

타입
Boolean